转【在ie9下在textbox框里面输入内容按enter键会触发按钮的事件】

最新推荐文章于 2025-10-03 16:07:03 发布

转载最新推荐文章于 2025-10-03 16:07:03 发布 · 376 阅读

IE兼容性专栏收录该内容

3 篇文章

订阅专栏

探讨了在IE10及以下版本中，当在textbox内输入内容并按下Enter键时，会触发页面上首个button标签的click事件的问题。解析了此现象的原因在于IE浏览器对文档模式的不同解释，并提供了通过设置button标签的type属性为'button'的解决方案。

问题
在ie下，如果存在有button标签，如果在textbox里面输入内容，按下enter键，则会触发第一个按钮的click事件，经过测试，在IE10以及以下的都存在这个问题

原因
浏览器默认行为不一致导致

IE浏览器IE8及以后的版本，会根据页面使用的文档模式（Defining document compatibility）来定义按钮的兼容性问题。IE8标准模式的默认行为是submit，其他模式的默认行为是button。

submit 该按钮是提交按钮（除了 Internet Explorer，该值是其他浏览器的默认值）。

button 该按钮是可点击的按钮（Internet Explorer 的默认值）。

reset 该按钮是重置按钮（清除表单数据）。

以上来自w3c 和这篇博客

解决办法
给button标签添加上属性type=“button”，来保证一定是button，而不会是submit，比如

click me
或者使用生成按钮

测试重现代码
html

textbox:
click by button
click2 by button

log:

log2:

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§;
}

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§;
}
在ie10及以下，会发现在textbox输入按下enter键会触发addLog2方法。

原文地址：https://www.cnblogs.com/DHclly/p/8488164.html