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

问题
在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:

js

var btn=document.getElementById(‘btn’);
btn.οnclick=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.οnclick=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

  • 1
    点赞
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值