轉【在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:
jsvar 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方法。