Jquery實現(xiàn)兼容各大瀏覽器的Enter回車切換輸入焦點的方法
更新時間：2014年09月01日 10:12:46 投稿：hebedich
本文主要講解的是在做項目中遇到需要Enter回車切換輸入焦點的解決思路以及最終解決方案，很簡單，需要的朋友可以參考下
做項目時，客戶要求能夠用enter回車直接切換輸入(焦點),當(dāng)最后一個時候，直接提交信息。
第一想法就是，網(wǎng)上去copy一段代碼直接用。但了百度、谷歌找了個遍，找到的代碼80%以上都是一樣的。有的代碼太老，都不能用。有的只有部分瀏覽器能用。折騰了半小時也沒個合適的辦法。最后一想，干脆自己動手。
一、思路
每次點擊回車的時候，獲取當(dāng)前的焦點位置，然后設(shè)置它的下一個元素獲取焦點;
二、代碼
<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中的when實現(xiàn)多個AJAX請求對應(yīng)單個回調(diào)的例子分享
我在為 Mozilla Developer Network(Mozilla開發(fā)者社區(qū)) 寫代碼時需要加載的一個普通的的腳本文件,以及一個JSON流。 因為我們使用jQuery,這意味著需要調(diào)用 jQuery.getScript 和 jQuery.getJSON 函數(shù)2014-04-04
這篇文章主要為大家詳細(xì)介紹了基于jQuery實現(xiàn)點擊列表加載更多效果的相關(guān)資料，具有一定的參考價值，感興趣的小伙伴們可以參考一下2016-05-05
jQuery實現(xiàn)動態(tài)加載select下拉列表項功能示例
這篇文章主要介紹了jQuery實現(xiàn)動態(tài)加載select下拉列表項功能,結(jié)合實例形式較為詳細(xì)的分析了jQuery動態(tài)加載select下拉列表項的步驟與相關(guān)操作技巧,需要的朋友可以參考下2018-05-05
Bootstrap 是基于 HTML、CSS、JAVASCRIPT 的，它簡潔靈活，使得 Web 開發(fā)更加快捷。本文重點給大家介紹bootstrap實現(xiàn)多級下拉菜單功能的實例代碼，感興趣的朋友一起學(xué)習(xí)吧2016-11-11
jquery 學(xué)習(xí)之二 屬性 文本與值(text,val)
jquery 學(xué)習(xí)之二 屬性 文本與值(text,val)，學(xué)習(xí)jquery的朋友可以參考下。2010-11-11
這篇文章主要介紹了jQuery技巧之讓任何組件都支持類似DOM的事件管理 的相關(guān)資料,需要的朋友可以參考下2016-04-04
jquery打開直接跳到網(wǎng)頁最下面、最低端實現(xiàn)代碼
接下來為大家詳細(xì)介紹下jquery如何實現(xiàn)打開直接跳到網(wǎng)頁最下面,最低端，感興趣的朋友可以參考下哈2013-04-04
這篇文章主要介紹了個人手機(jī)的常用的jQuery前端技巧,需要的朋友可以參考下2014-12-12
本文主要介紹了字太多用...代替的兩種方法。具有很好的參考價值。下面跟著小編一起來看下吧2017-03-03
這篇文章主要介紹了小巧強大的jquery layer彈窗彈層插件的使用方法以及使用范圍，非常詳細(xì)，有需要的小伙伴可以參考下。2015-12-12