在ie9下在textbox框里面输入内容按enter键会触发按钮的事件
问题
在ie下,如果存在有button标签,如果在textbox里面输入内容,按下enter键,则会触发第一个按钮的click事件,经过测试,在IE10以及以下的都存在这个问题
原因
浏览器默认行为不一致导致
IE浏览器IE8及以后的版本,会根据页面使用的文档模式(Defining document compatibility)来定义按钮的兼容性问题。IE8标准模式的默认行为是submit,其他模式的默认行为是button。
submit 该按钮是提交按钮(除了 Internet Explorer,该值是其他浏览器的默认值)。
button 该按钮是可点击的按钮(Internet Explorer 的默认值)。
reset 该按钮是重置按钮(清除表单数据)。
解决办法
给button标签添加上属性type="button",来保证一定是button,而不会是submit,比如
<button type="button" id="btn">click me</button>
或者使用<input type="button" value="click"/>
生成按钮
测试重现代码
html
textbox:<input type="text" />
<button type="button" id="btn">click by button</button>
<button id="btn2">click2 by button</button>
<div>
<div>
<p>log:</p>
<div id="list">
</div>
</div>
<div>
<p>log2:</p>
<div id="list2">
</div>
</div>
js
var btn=document.getElementById('btn');
btn.onclick=addLog;
var list = document.getElementById('list');
function addLog (event) {
debugger;
var p = document.createElement('p');
p.innerText='click button';
list.appendChild(p);
}
var btn2=document.getElementById('btn2');
btn2.onclick=addLog2;
var list2 = document.getElementById('list2');
function addLog2 (event) {
var p = document.createElement('p');
p.innerText='click button2';
list2.appendChild(p);
}
在ie10及以下,会发现在textbox输入按下enter键会触发addLog2方法
生活,有时候就是很简单,有时候却很要命。