IE在input内回车自动触发button的解决方法

HTML/CSS 2013-12-19 IE,input,button,回车

在IE中有一个奇怪的现象,当你在input内敲回车时,IE会自动寻找第一个button标签并且触发它。

HTML Code:

<p><button onclick="console.log('from button click');">button</button></p>
<p><input type="text" value="在这里回车就触发提交按钮" style="width:300px;" /></p>

使用IE打开,并且在input内回车,就会执行button的onclick事件

你可以点击这里查看DEMO

如果你有两个button,只会触发第一个,如:

<p><button onclick="console.log('from button click1');">button1</button></p>
<p><button onclick="console.log('from button click2');">button2</button></p>
<p><input type="text" value="在这里回车就触发提交按钮" style="width:300px;" /></p>

你可以点击这里查看DEMO

回车后只会触发button1的onclick,但可笑的如果你把button标签换成input然后在把type设置为button却不会发生这个奇怪的事,虽然效果是一样。

Code:

<p><input type="button" onclick="console.log('from button click1');" value="button1" /></p>
<p><button onclick="console.log('from button click2');">button2</button></p>
<p><input type="text" value="在这里回车就触发提交按钮" style="width:300px;" /></p>

回车会避开input,执行button2

你可以点击这里查看DEMO

如果你不想在input内执行回车就被执行button的onclick事件可以在页面顶部添加一个button,毕竟在input内敲回车是一种经常犯的毛病。如:

<p><button>禁止input回车触发的button</button></p>
<p><button onclick="console.log('from button click1');">button1</button></p>
<p><button onclick="console.log('from button click2');">button2</button></p>
<p><input type="text" value="在这里回车就触发提交按钮" style="width:300px;" /></p>

这样第一个button就劫持了input的回车事件,防止了后面功能onclick被意外触发的可能性,但页面不美观,如:

你可以点击这里查看DEMO

但不能把button设置display:none给隐藏,或者visibility:hidden占位隐藏,否则不能起到劫持input内回车事件,如:

<p><button style="display:none;">禁止input回车触发的button</button></p>
<p><button onclick="console.log('from button click1');">button1</button></p>
<p><button onclick="console.log('from button click2');">button2</button></p>
<p><input type="text" value="在这里回车就触发提交按钮" style="width:300px;" /></p>

以上代码在input回车仍然会找到button1并执行onclick事件,DEMO

如果要隐藏它,但又能保持劫持input回车事件的功能,可以把在button外面再套一层父标签并且把父标签设置为宽与高为0即可

<div style="display:block; width:0; height:0; overflow:hidden;">
	<button>禁止input回车触发的button</button>
</div>
<p><button onclick="console.log('from button click1');">button1</button></p>
<p><button onclick="console.log('from button click2');">button2</button></p>
<p><input type="text" value="在这里回车就触发提交按钮" style="width:300px;" /></p>

这样就相当于把button隐藏了,并且还保住了功能,DEMO

如果嫌麻烦可以直接把button改成input[type=button]或者使用a标签代替,DEMO中的例子请用IE浏览器测试!

文字链接:《IE在input内回车自动触发button的解决方法

文章地址:http://www.qttc.me/201312393.html

除非标注,琼台博客所有博文均为原创,转载请加文字链接注明来源

乳名?小名?昵称?网名?均可

email,放心,我不会给你乱投广告的

想获得回访就把你的站点URL写上(没有留空)

[NOTICE]木要投放广告
[NOTICE]木要骂人,说不该说的话
[NOTICE]自由言论,但要遵纪守法

Comments 3