用JS控制回車(chē)事件的代碼
更新時(shí)間：2011年02月20日 23:19:12 作者：
在寫(xiě)代碼的時(shí)候偶爾會(huì)碰到被回車(chē)按鈕所糾結(jié)的時(shí)候，例如上周客戶(hù)反應(yīng)我們的產(chǎn)品在頁(yè)面按回車(chē)后，總是自動(dòng)登出，而不是提交數(shù)據(jù)，客戶(hù)對(duì)此也是意見(jiàn)很大。
我們操作習(xí)慣也確實(shí)是喜歡用回車(chē)建來(lái)直接提交數(shù)據(jù)。經(jīng)過(guò)對(duì)項(xiàng)目的一番檢查，這其實(shí)是頁(yè)面設(shè)計(jì)得不好，導(dǎo)致瀏覽器在加載時(shí)把退出登錄按鈕當(dāng)成默認(rèn)的按鈕，所以一按回車(chē)就觸這退出按鈕事件。考慮到一個(gè)龐大的項(xiàng)目為了這個(gè)問(wèn)題去改頁(yè)面設(shè)計(jì)也不太現(xiàn)實(shí)，況且客戶(hù)要求在有“保存”按鈕時(shí)按回車(chē)按鈕就觸發(fā)“保存”按鈕事件，有“下一步”按鈕時(shí)就觸發(fā)它的事件，有“提交”按鈕時(shí)就觸發(fā)相應(yīng)的事件等等，如果一個(gè)個(gè)頁(yè)面去改動(dòng)那工作量可就大得驚人了。于是乎考慮用直接在模板header文件中用js來(lái)實(shí)現(xiàn)全站對(duì)回車(chē)按鈕的事件觸發(fā)，下面是相應(yīng)的代碼：
<script language="javascript" for="document" event="onkeydown">
//回車(chē)按鈕事件處理
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>
其實(shí)也蠻簡(jiǎn)單的，就在模板文件中加入上面那段，先獲取回車(chē)事件，然后就獲取頁(yè)面的所有按鈕，一個(gè)個(gè)循環(huán)判斷按鈕ID是否符合你要求，是的就去觸發(fā)按鈕的事件。上面代碼還存在一個(gè)問(wèn)題就是當(dāng)你頁(yè)面中同時(shí)存在了那幾個(gè)ID的按鈕時(shí)，會(huì)導(dǎo)致觸發(fā)所有按鈕，至于如何改進(jìn)就看實(shí)際應(yīng)用場(chǎng)景了，而在我的項(xiàng)目中是不會(huì)出現(xiàn)同時(shí)存在這幾個(gè)按鈕，所以可以平安應(yīng)用。
復(fù)制代碼 代碼如下:
<script language="javascript" for="document" event="onkeydown">
//回車(chē)按鈕事件處理
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>
其實(shí)也蠻簡(jiǎn)單的，就在模板文件中加入上面那段，先獲取回車(chē)事件，然后就獲取頁(yè)面的所有按鈕，一個(gè)個(gè)循環(huán)判斷按鈕ID是否符合你要求，是的就去觸發(fā)按鈕的事件。上面代碼還存在一個(gè)問(wèn)題就是當(dāng)你頁(yè)面中同時(shí)存在了那幾個(gè)ID的按鈕時(shí)，會(huì)導(dǎo)致觸發(fā)所有按鈕，至于如何改進(jìn)就看實(shí)際應(yīng)用場(chǎng)景了，而在我的項(xiàng)目中是不會(huì)出現(xiàn)同時(shí)存在這幾個(gè)按鈕，所以可以平安應(yīng)用。
相關(guān)文章
這篇文章主要介紹了微信小程序后臺(tái)持續(xù)定位功能使用詳解,文中通過(guò)示例代碼介紹的非常詳細(xì)，對(duì)大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值,需要的朋友可以參考下2019-08-08
js ondocumentready onmouseover onclick onmouseout 樣式
下面都是一些上面的事件觸發(fā)的事先定義的代碼。2010-07-07
uniapp與webview之間的相互傳值的實(shí)現(xiàn)
這篇文章主要介紹了uniapp與webview之間的相互傳值的實(shí)現(xiàn)，文中通過(guò)示例代碼介紹的非常詳細(xì)，對(duì)大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值，需要的朋友們下面隨著小編來(lái)一起學(xué)習(xí)學(xué)習(xí)吧2020-06-06
js取float型小數(shù)點(diǎn)后兩位數(shù)的方法
js中取小數(shù)點(diǎn)后兩位方法最常用的就是四舍五入函數(shù)了，前面我介紹過(guò)js中四舍五入一此常用函數(shù)，這里正好用上，下面我們一起來(lái)看取float型小數(shù)點(diǎn)后兩位一些方法總結(jié)2014-01-01
JS & JQuery 動(dòng)態(tài)添加 select option
這篇文章主要介紹了JS & JQuery 動(dòng)態(tài)添加 select option 的相關(guān)資料,非常不錯(cuò)具有參考借鑒價(jià)值,感興趣的朋友一起看下吧2016-06-06
如果想用百度地圖api，首先需要先獲取一個(gè)百度地圖api的密鑰，然后引入百度地圖的api，這篇文章就講下百度地圖api如何使用的相關(guān)資料，需要的朋友可以參考下2015-08-08
javascript記錄文本框內(nèi)文字個(gè)數(shù)檢測(cè)文字個(gè)數(shù)變化
要對(duì)文本框中用戶(hù)輸入的文字進(jìn)行記數(shù)，在下面顯示出來(lái)，經(jīng)研究找到個(gè)不錯(cuò)的方法，可以完美解決在刪除文字后，字?jǐn)?shù)變化問(wèn)題2014-10-10
兼容IE,firefox的獲取節(jié)點(diǎn)的文本值的javascript代碼
javascript獲取節(jié)點(diǎn)的文本值，已經(jīng)考慮了兼容性。大家可以放心使用。注意了這里的兼容沒(méi)有使用innerText,如果要使用兼容innerText,請(qǐng)參考腳本之家以前發(fā)布的文章。2009-12-12
js中encode、decode的應(yīng)用說(shuō)明
這里簡(jiǎn)單介紹下js中的encode、decode的字符2012-10-10![淺談JS使用[ ]來(lái)訪問(wèn)對(duì)象屬性](http://img.jbzj.com/images/xgimg/bcimg9.png)
淺談JS使用[ ]來(lái)訪問(wèn)對(duì)象屬性
下面小編就為大家?guī)?lái)一篇淺談JS使用[ ]來(lái)訪問(wèn)對(duì)象屬性。小編覺(jué)得挺不錯(cuò)的，現(xiàn)在就分享給大家，也給大家做個(gè)參考。一起跟隨小編過(guò)來(lái)看看吧2016-09-09