Jquery實(shí)現(xiàn)兼容各大瀏覽器的Enter回車切換輸入焦點(diǎn)的方法
做項(xiàng)目時(shí),客戶要求能夠用enter回車直接切換輸入(焦點(diǎn)),當(dāng)最后一個(gè)時(shí)候,直接提交信息。
第一想法就是,網(wǎng)上去copy一段代碼直接用。但了百度、谷歌找了個(gè)遍,找到的代碼80%以上都是一樣的。有的代碼太老,都不能用。有的只有部分瀏覽器能用。折騰了半小時(shí)也沒個(gè)合適的辦法。最后一想,干脆自己動(dòng)手。
一、思路
每次點(diǎn)擊回車的時(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 ; //瀏覽器名稱 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)文章
Spring shiro + bootstrap + jquery.validate 實(shí)現(xiàn)登錄、注冊(cè)功能
這篇文章主要介紹了Spring shiro + bootstrap + jquery.validate 實(shí)現(xiàn)登錄、注冊(cè)功能,需要的朋友可以參考下2017-06-06Java框架SSH結(jié)合Easyui控件實(shí)現(xiàn)省市縣三級(jí)聯(lián)動(dòng)示例解析
這篇文章主要為大家詳細(xì)介紹了Java框架SSH結(jié)合Easyui控件實(shí)現(xiàn)省市縣三級(jí)聯(lián)動(dòng)示例,具有一定的參考價(jià)值,感興趣的小伙伴們可以參考一下2016-06-06基于jQuery實(shí)現(xiàn)自動(dòng)輪播旋轉(zhuǎn)木馬特效
這篇文章主要介紹了基于jQuery實(shí)現(xiàn)自動(dòng)輪播旋轉(zhuǎn)木馬特效,圖片輪播效果特別適合做產(chǎn)品展示,感興趣的小伙伴可以參考下。2015-11-11jQuery彈出窗口打開鏈接的實(shí)現(xiàn)代碼
這篇文章主要介紹了jQuery彈出窗口打開鏈接的實(shí)現(xiàn)代碼,需要的朋友可以參考下2016-12-12Jquery之Ajax運(yùn)用 學(xué)習(xí)運(yùn)用篇
JQuery中Ajax的運(yùn)用相信很多人都已熟悉,本文主要是記錄下個(gè)人實(shí)踐中的應(yīng)用知識(shí),旨在加強(qiáng)記憶。2011-09-09jQuery遍歷DOM的父級(jí)元素、子級(jí)元素和同級(jí)元素的方法總結(jié)
借助jQuery我們可以輕松地堆DOM元素進(jìn)行向上、向下遍歷以及同級(jí)的遍歷,本文我們即來(lái)整理jQuery遍歷DOM的父級(jí)元素、子級(jí)元素和同級(jí)元素的方法總結(jié):2016-07-07jquery二級(jí)目錄選中當(dāng)前頁(yè)的css樣式
下面小編就為大家?guī)?lái)一篇jquery二級(jí)目錄選中當(dāng)前頁(yè)的css樣式。小編覺得挺不錯(cuò)的,現(xiàn)在就分享給大家,也給大家做個(gè)參考。一起跟隨小編過(guò)來(lái)看看吧2016-12-12jQuery+CSS3實(shí)現(xiàn)點(diǎn)贊功能
本篇文章主要介紹了jQuery+CSS3實(shí)現(xiàn)點(diǎn)贊功能的示例代碼。具有很好的參考價(jià)值。下面跟著小編一起來(lái)看下吧2017-03-03