新人请教两个js问题.1-如何能触发一个事件让一个按钮显示出被点击了一下的动画?2-input file透明,用其他按钮遮盖,IE7下点击有光标闪动如何解决?

再看我一眼 2013-02-01 04:06:26

如题

问题比较偏门,网上没找到有效资料特来求教

顺便求咱们这个版块的发帖时的标签输入插件...发帖才发现太好用了...

...全文

505 14 打赏收藏转发到动态举报

写回复

用AI写文章

14 条回复

切换为时间正序

请发表友善的回复…

发表回复

UpTimer 2015-08-20

打赏
举报

引用 13 楼 no_more_cry 的回复:

今天我也遇到了一个一样的问题，最终百度到，ie下 input的光标是和font-size有关，所以，我把input type 的height设置为28px,font-size设置为0px，视觉上就看不见闪烁的光标了

我专门登录一次来赞你。设置font-size管用。

no_more_cry 2015-08-08

打赏
举报

今天我也遇到了一个一样的问题，最终百度到，ie下 input的光标是和font-size有关，所以，我把input type 的height设置为28px,font-size设置为0px，视觉上就看不见闪烁的光标了

陈悕 2014-06-19

打赏
举报

引用 6 楼 showbo 的回复:

[quote=引用 3 楼 anyilaoliu 的回复:]
引用 2 楼 PCBoy008 的回复:1、捕捉onclick事件，如果要等待可以先 return false，动画完成后再触发 click()
2、用 display: none

感谢回复,但您可能没看明白我的问题

我现在需要对input type=file进行美化

所以我把file框做很大,并且透明.同时绝对定位了一个span作为文件路径的显示……

用a来做



<style>

/*file容器样式*/

a.files {

	width:90px;

	height:30px;

	overflow:hidden;

	display:block;

	border:1px solid #BEBEBE;

	text-decoration:none;

}

a.files:hover {

	background-color:#FFFFEE;

	background-position:0 -30px;

}

/*file设为透明，并覆盖整个触发面*/

a.files input {

	margin-left:-350px;

	font-size:30px;

	cursor:pointer;

	filter:alpha(opacity=0);

	opacity:0;

}

</style>

<a href="javascript:void(0);" class="files">选择文件...<input type="file"/></a>

[/quote]

按照你的方法做的，效果如此，点击框里的下方空白处才能弹出浏览框，别的地方无用，

oxfed 2013-02-02

打赏
举报

自定义文件上传方式下面的代码在ie中没问题，而在firefox中怎么获取上传的文件名称失败呢？忘高手指点。 <html> <script type="text/javascript"> function upload(){ var div=document.getElementById("uploaderContainer"); div.innerHTML="<input type='file' />"; div.firstChild.click(); setTimeout("updateFileName()",100); } function updateFileName(){ var uploader=document.getElementById("uploaderContainer").firstChild; //alert(uploader); var fileName=(uploader==null)?"":uploader.value; //alert(fileName); if(fileName.lenght==0){ setTimeout("updateFileName()",100); }else{ document.getElementById("fileName").value=fileName.replace(/.*\\/,""); } } function showFileName(){ alert(document.getElementById("test").value); } </script> <style type="text/css"> #uploaderContainer{ display:none; } </style> <body> <div id="uploaderContainer"></div> <input type="text" id="fileName" /> <input type="button" onclick="upload()" value="浏览" /> </body> </html>

kinger906 2013-02-02

打赏
举报

1.在点击事件中，先动画，然后将具体操作添加到setTimeout(function(){//操作},500)中 2.设置样式opacity,z-index添加按钮置于其上

ILOVE_ASPNET 2013-02-02

打赏
举报

封装的效果，上面打错一个字。

ILOVE_ASPNET 2013-02-02

打赏
举报

引用 5 楼 bbjbepzz 的回复:

引用 3 楼 anyilaoliu 的回复:第一个问题的话是希望能点击到这个file的提交按钮后那个假的button也可以有被点击一下的那种动画效果这个比较费解

假设如果你要在 file按钮提交后执行 button事件可以用 $("button").trigger("click"); 假设如果你不需要执行button的click, 那么你在file提交后用CSS控制假button的样式就行，至于你的动画效果不知道是什么样的，如果是慢慢消失或者隐藏 jquery 也有封闭的效果，如果只是做点击后的一个效果展示就用CSS就好了。

oxfed 2013-02-01

打赏
举报

引用 3 楼 anyilaoliu 的回复:

引用 2 楼 PCBoy008 的回复:1、捕捉onclick事件，如果要等待可以先 return false，动画完成后再触发 click() 2、用 display: none 感谢回复,但您可能没看明白我的问题我现在需要对input type=file进行美化所以我把file框做很大,并且透明.同时绝对定位了一个span作为文件路径的显示……

display:none;不会影响功能。如果你想按钮有被点击效果，只要出发对应按钮的click事件即可。我好奇你那个span怎样获取最新上传的文件名

斯洛文尼亚旅游 2013-02-01

打赏
举报

引用 3 楼 anyilaoliu 的回复:

引用 2 楼 PCBoy008 的回复:1、捕捉onclick事件，如果要等待可以先 return false，动画完成后再触发 click() 2、用 display: none 感谢回复,但您可能没看明白我的问题我现在需要对input type=file进行美化所以我把file框做很大,并且透明.同时绝对定位了一个span作为文件路径的显示……

用a来做


<style>
/*file容器样式*/
a.files {
	width:90px;
	height:30px;
	overflow:hidden;
	display:block;
	border:1px solid #BEBEBE;
	text-decoration:none;
}
a.files:hover {
	background-color:#FFFFEE;
	background-position:0 -30px;
}
/*file设为透明，并覆盖整个触发面*/
a.files input {
	margin-left:-350px;
	font-size:30px;
	cursor:pointer;
	filter:alpha(opacity=0);
	opacity:0;
}
</style>
<a href="javascript:void(0);" class="files">选择文件...<input type="file"/></a>

bbjbepzz 2013-02-01

打赏
举报

引用 3 楼 anyilaoliu 的回复:

第一个问题的话是希望能点击到这个file的提交按钮后那个假的button也可以有被点击一下的那种动画效果

这个比较费解

oxfed 2013-02-01

打赏
举报

为什么要把file框放很大，而不是直接用span遮住file的框？这样，你直接点击file的浏览，在span中显示文件名不是更直接？

再看我一眼 2013-02-01

打赏
举报

引用 2 楼 PCBoy008 的回复:

1、捕捉onclick事件，如果要等待可以先 return false，动画完成后再触发 click() 2、用 display: none

感谢回复,但您可能没看明白我的问题我现在需要对input type=file进行美化所以我把file框做很大,并且透明.同时绝对定位了一个span作为文件路径的显示,一个button放在浏览按钮位置来视觉欺骗把file隐藏的结果就是这个上传图片的功能无效啦..... 第一个问题的话是希望能点击到这个file的提交按钮后那个假的button也可以有被点击一下的那种动画效果