用JS控制回車事件的代碼
更新時間：2011年02月20日 23:19:12 作者：
在寫代碼的時候偶爾會碰到被回車按鈕所糾結(jié)的時候，例如上周客戶反應我們的產(chǎn)品在頁面按回車后，總是自動登出，而不是提交數(shù)據(jù)，客戶對此也是意見很大。
我們操作習慣也確實是喜歡用回車建來直接提交數(shù)據(jù)。經(jīng)過對項目的一番檢查，這其實是頁面設計得不好，導致瀏覽器在加載時把退出登錄按鈕當成默認的按鈕，所以一按回車就觸這退出按鈕事件?？紤]到一個龐大的項目為了這個問題去改頁面設計也不太現(xiàn)實，況且客戶要求在有“保存”按鈕時按回車按鈕就觸發(fā)“保存”按鈕事件，有“下一步”按鈕時就觸發(fā)它的事件，有“提交”按鈕時就觸發(fā)相應的事件等等，如果一個個頁面去改動那工作量可就大得驚人了。于是乎考慮用直接在模板header文件中用js來實現(xiàn)全站對回車按鈕的事件觸發(fā)，下面是相應的代碼：
<script language="javascript" for="document" event="onkeydown">
//回車按鈕事件處理
if (event.keyCode == 13){
event.keyCode=0;
var list=document.getElementsByTagName("input");
for(var i=0;i<list.length && list[i];i++)
{
if(list[i].id.indexOf("IBtnNextStep")>0){//ID中包含有“IBtnNextStep”字眼的按鈕
list[i].click();
}
if(list[i].id=="BtnSave"){
list[i].click();
}
if(list[i].id=="BtnSumbit"){
list[i].click();
}
}
return false;
}
</script>
其實也蠻簡單的，就在模板文件中加入上面那段，先獲取回車事件，然后就獲取頁面的所有按鈕，一個個循環(huán)判斷按鈕ID是否符合你要求，是的就去觸發(fā)按鈕的事件。上面代碼還存在一個問題就是當你頁面中同時存在了那幾個ID的按鈕時，會導致觸發(fā)所有按鈕，至于如何改進就看實際應用場景了，而在我的項目中是不會出現(xiàn)同時存在這幾個按鈕，所以可以平安應用。
復制代碼 代碼如下:
<script language="javascript" for="document" event="onkeydown">
//回車按鈕事件處理
if (event.keyCode == 13){
event.keyCode=0;
var list=document.getElementsByTagName("input");
for(var i=0;i<list.length && list[i];i++)
{
if(list[i].id.indexOf("IBtnNextStep")>0){//ID中包含有“IBtnNextStep”字眼的按鈕
list[i].click();
}
if(list[i].id=="BtnSave"){
list[i].click();
}
if(list[i].id=="BtnSumbit"){
list[i].click();
}
}
return false;
}
</script>
其實也蠻簡單的，就在模板文件中加入上面那段，先獲取回車事件，然后就獲取頁面的所有按鈕，一個個循環(huán)判斷按鈕ID是否符合你要求，是的就去觸發(fā)按鈕的事件。上面代碼還存在一個問題就是當你頁面中同時存在了那幾個ID的按鈕時，會導致觸發(fā)所有按鈕，至于如何改進就看實際應用場景了，而在我的項目中是不會出現(xiàn)同時存在這幾個按鈕，所以可以平安應用。
相關(guān)文章
大多數(shù)人系統(tǒng)學習過的程序設計語言，在這些語言的學習過程中最早學到的幾個要點之一就是值類型和引用類型的區(qū)別。下面我們來看一下在 JavaScript 中基本數(shù)據(jù)類型（Primitive Types)和引用類型（Reference Types)的區(qū)別。2015-05-05
你必須知道的Javascript知識點之"單線程事件驅(qū)動"的使用
本篇文章小編為大家介紹，你必須知道的Javascript知識點之"單線程事件驅(qū)動"的使用。需要的朋友參考下2013-04-04
Javascript與vbscript數(shù)據(jù)共享
Javascript與vbscript數(shù)據(jù)共享...2007-01-01
深入理解JavaScript中的call、apply、bind方法的區(qū)別
下面小編就為大家?guī)硪黄钊肜斫釰avaScript中的call、apply、bind方法的區(qū)別。小編覺得挺不錯的，現(xiàn)在就分享給大家，也給大家做個參考。一起跟隨小編過來看看吧2016-05-05
用js怎么把&字符換成"&:"...2006-10-10
在現(xiàn)代Web應用程序中,日期選擇器是一個非常常見的組件,用戶可以使用它來選擇特定的日期,在本篇文章中,我們將使用JavaScript和HTML來創(chuàng)建一個簡單但功能強大的日期選擇插件,這個日期選擇插件是比較考驗Js基本功的,需要的朋友可以參考下2023-10-10
這篇文章主要介紹了Javascript promise異步編程，Promise 是異步編程的一種解決方案，可以替代傳統(tǒng)的解決方案–回調(diào)函數(shù)和事件，文中通過示例代碼介紹的非常詳細，對大家的學習或者工作具有一定的參考學習價值，需要的朋友們下面隨著小編來一起學習吧2023-04-04
最好用的Bootstrap fileinput.js文件上傳組件
這篇文章主要為大家詳細介紹了最好用的Bootstrap fileinput.js文件上傳組件的使用方法,具有一定的參考價值，感興趣的小伙伴們可以參考一下2016-12-12
javascript中Array()數(shù)組函數(shù)詳解
在JavaScript中數(shù)組也是比較常用的對象之一，數(shù)組是值的有序集合，本篇文章給大家分享Javascript中Array()數(shù)組函數(shù)詳解，需要的朋友可以參考下2015-08-08
這篇文章主要為大家詳細介紹了微信小程序?qū)崿F(xiàn)卡片層疊滑動效果，文中示例代碼介紹的非常詳細，具有一定的參考價值，感興趣的小伙伴們可以參考一下2019-06-06