Enter回車(chē)切換輸入焦點(diǎn)實(shí)現(xiàn)思路與代碼兼容各大瀏覽器
更新時(shí)間：2014年09月01日 17:54:05 投稿：whsnow
這篇文章主要介紹了Enter回車(chē)切換輸入焦點(diǎn)實(shí)現(xiàn)思路與代碼并兼容各大瀏覽器,需要的朋友可以參考下
做項(xiàng)目時(shí)，客戶(hù)要求能夠用enter回車(chē)直接切換輸入(焦點(diǎn)),當(dāng)最后一個(gè)時(shí)候，直接提交信息。
第一想法就是，網(wǎng)上去copy一段代碼直接用。但了百度、谷歌找了個(gè)遍，找到的代碼80%以上都是一樣的。有的代碼太老，都不能用。有的只有部分瀏覽器能用。折騰了半小時(shí)也沒(méi)個(gè)合適的辦法。最后一想，干脆自己動(dòng)手。
一、思路
每次點(diǎn)擊回車(chē)的時(shí)候，獲取當(dāng)前的焦點(diǎn)位置，然后設(shè)置它的下一個(gè)元素獲取焦點(diǎn);
二、代碼
<script type="text/javascript">
$('input:text:first').focus();
document.onkeydown = function enterHandler(event)
{
var inputs = $("input"); //可自行添加其它過(guò)濾條件
var browser = navigator.appName ; //瀏覽器名稱(chēng)
var userAgent = navigator.userAgent; //取得瀏覽器的userAgent字符串
var Code = '' ;
if(browser.indexOf('Internet')>-1) // IE
Code = window.event.keyCode ;
else if(userAgent.indexOf("Firefox")>-1) // 火狐
Code = event.which;
else // 其它
Code = event.keyCode ? event.keyCode : event.which ? event.which : event.charCode;
if (Code == 13) //可以自行加其它過(guò)濾條件
{
for(var i=0;i<inputs.length;i++)
{
if(inputs[i].id == document.activeElement.id)
{
i = i== (inputs.length - 1) ? -1 : i ;
$('#'+ inputs[i+1].id ).focus()
break;
}
}
}
}
</script>
其中，因?yàn)镮E和火狐對(duì)鍵值獲取的不同，所以對(duì)瀏覽器做了簡(jiǎn)單的判斷區(qū)分。這樣就可以在各個(gè)瀏覽器上獲取敲擊的鍵值。
最后，獲取到當(dāng)前的值以后，就可以加其它的各種條件了。
相關(guān)文章
jquery scroll()區(qū)分橫向縱向滾動(dòng)條的方法
這篇文章主要介紹了使用jquery scroll()方法區(qū)分瀏覽器橫向和縱向滾動(dòng)條的方法,需要的朋友可以參考下2014-04-04
這篇文章主要介紹了jquery圖片輪播插件，仿支付寶2013版全屏圖片幻燈片功能,需要的朋友可以參考下2014-04-04
JQuery 引發(fā)兩次$(document.ready)事件
ASP.net MVC 做了個(gè)工程，不知道為什么Search按就總是執(zhí)行兩次。2010-01-01
jquery select選中的一個(gè)小問(wèn)題
jquery使select選中的注意事項(xiàng)。2009-10-10
JQuery解析XML數(shù)據(jù)的幾個(gè)簡(jiǎn)單實(shí)例
下面小編就為大家?guī)?lái)一篇JQuery解析XML數(shù)據(jù)的幾個(gè)簡(jiǎn)單實(shí)例。小編覺(jué)得挺不錯(cuò)的，現(xiàn)在分享給大家，也給大家做個(gè)參考。一起跟隨小編過(guò)來(lái)看看吧2016-05-05
觸發(fā)事件，或稱(chēng)模擬用戶(hù)動(dòng)作。比如點(diǎn)擊，我們可以用代碼去模擬用戶(hù)點(diǎn)擊，達(dá)到的效果與真實(shí)的鼠標(biāo)點(diǎn)擊是一樣的。2011-08-08
這篇文章主要介紹了jquery中change()用法,實(shí)例分析了change的功能、定義及具體的使用技巧,非常具有實(shí)用價(jià)值,需要的朋友可以參考下2015-02-02
jquery中實(shí)現(xiàn)簡(jiǎn)單的tabs插件功能的代碼
jquery改變了程序員寫(xiě)javascript的方式。作為jquery的愛(ài)好者和新手，最近我學(xué)會(huì)了用寥寥幾句jquery代碼實(shí)現(xiàn)類(lèi)似tabs插件的功能，相信此文能為許多剛?cè)腴T(mén)的jquery愛(ài)好者和想實(shí)現(xiàn)tabs插件功能的朋友帶來(lái)一些幫助。2011-03-03
jQuery動(dòng)態(tài)移除和添加背景圖片的方法詳解
這篇文章主要介紹了jQuery動(dòng)態(tài)移除和添加背景圖片的方法,結(jié)合實(shí)例形式分析了jQuery針對(duì)頁(yè)面元素樣式及事件響應(yīng)的動(dòng)態(tài)操作技巧,需要的朋友可以參考下2017-03-03
鋒利的jQuery 要點(diǎn)歸納（二）上 jQuery中的DOM操作，需要的朋友可以參考下。2010-03-03