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

清疚 2023-06-02 14:58 11阅读 0赞

## 问题 ##

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

## 原因 ##

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

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

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

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

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

以上来自[w3c][] 和[这篇博客][Link 1]

## 解决办法 ##

给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>

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方法

转载于:https://www.cnblogs.com/DHclly/p/8488164.html

[w3c]: http://www.w3school.com.cn/tags/att_button_type.asp
[Link 1]: https://www.cnblogs.com/wisdomoon/p/3330856.html