快捷導(dǎo)航

用JS控制回車事件的代碼

更新時(shí)間：2011年02月20日 23:19:12 作者：

在寫代碼的時(shí)候偶爾會(huì)碰到被回車按鈕所糾結(jié)的時(shí)候，例如上周客戶反應(yīng)我們的產(chǎn)品在頁面按回車后，總是自動(dòng)登出，而不是提交數(shù)據(jù)，客戶對(duì)此也是意見很大。

我們操作習(xí)慣也確實(shí)是喜歡用回車建來直接提交數(shù)據(jù)。經(jīng)過對(duì)項(xiàng)目的一番檢查，這其實(shí)是頁面設(shè)計(jì)得不好，導(dǎo)致瀏覽器在加載時(shí)把退出登錄按鈕當(dāng)成默認(rèn)的按鈕，所以一按回車就觸這退出按鈕事件?？紤]到一個(gè)龐大的項(xiàng)目為了這個(gè)問題去改頁面設(shè)計(jì)也不太現(xiàn)實(shí)，況且客戶要求在有“保存”按鈕時(shí)按回車按鈕就觸發(fā)“保存”按鈕事件，有“下一步”按鈕時(shí)就觸發(fā)它的事件，有“提交”按鈕時(shí)就觸發(fā)相應(yīng)的事件等等，如果一個(gè)個(gè)頁面去改動(dòng)那工作量可就大得驚人了。于是乎考慮用直接在模板header文件中用js來實(shí)現(xiàn)全站對(duì)回車按鈕的事件觸發(fā)，下面是相應(yīng)的代碼：

復(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> 

其實(shí)也蠻簡(jiǎn)單的，就在模板文件中加入上面那段，先獲取回車事件，然后就獲取頁面的所有按鈕，一個(gè)個(gè)循環(huán)判斷按鈕ID是否符合你要求，是的就去觸發(fā)按鈕的事件。上面代碼還存在一個(gè)問題就是當(dāng)你頁面中同時(shí)存在了那幾個(gè)ID的按鈕時(shí)，會(huì)導(dǎo)致觸發(fā)所有按鈕，至于如何改進(jìn)就看實(shí)際應(yīng)用場(chǎng)景了，而在我的項(xiàng)目中是不會(huì)出現(xiàn)同時(shí)存在這幾個(gè)按鈕，所以可以平安應(yīng)用。

您可能感興趣的文章: