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