1、背景說明
在使用 JQuery EasyUI 各表單組件時，實際客戶端頁面元素是由 JQuery EasyUI 生成的，元素的焦點切換，雖然 Tab 鍵可以正常用，但順序控制屬性 tabindex 不起作用，因為頁面看到的元素，是生成的，沒有tabindex 屬性，而真實的元素被隱藏了。本文通過一個自定義函數(shù)，實現(xiàn)Tab 和 回車鍵的焦點切換功能。
2、函數(shù)定義
通過捕獲窗口按件，對回車和Tab鍵進行了熱點切換處理。先根據(jù)當前焦點，獲取需要tabindex 屬性，加1后為下一焦點無素的屬性值，根據(jù)這一屬性找到下一焦點元素，并設(shè)置成焦點。
//增加改變焦點操作function addChangeFocusOpe(){ $(window).keydown(function(event){//按鍵事件 if(event.keyCode==13 || event.keyCode==9) //回車 或 tab鍵 { var tabindex = $($(':focus').parent()[0]).prev().attr("tabindex"); //取（當前焦點--父元素--前一元素）的 tabindex 屬性。該結(jié)構(gòu)根據(jù)jQuery EasyUI生成的頁面結(jié)構(gòu)而定。 if(tabindex != undefined) { var nextIndex = parseInt(tabindex) + 1; //下一焦點元素tabindex編號 var nextInput = $("input[tabindex='"+nextIndex+"']"); //查找下一焦點元素 if(nextInput.length > 0); { var nextObj = $(nextInput[0]); var options = nextObj.attr("data-options"); //設(shè)置的屬性值，用于判斷是否是“文本區(qū)域” var focusObj = $(nextInput[0]).next('span').find('input'); //元素--下一span元素 --內(nèi)部input。該結(jié)構(gòu)根據(jù)jQuery EasyUI生成的頁面結(jié)構(gòu)而定 if(options.indexOf("multiline:true") != -1) {//要設(shè)置焦點的元素是“文本區(qū)域” focusObj = nextObj.next('span').find('textarea'); } focusObj.focus(); //設(shè)置焦點 } } } if(event.keyCode==9) {//對于tab鍵，則取消其本有功能，因為上面已完成焦點轉(zhuǎn)換 return false; } });}3、使用方式
（1）頁面調(diào)用函數(shù)
$(function(){ $('#code').next('span').find('input').focus(); //第一個元素設(shè)置焦點 addChangeFocusOpe(); //頁面增加焦點切換操作 });（2）表單元素設(shè)置 tabindex 屬性
4、約束和限制
由于函數(shù)實現(xiàn)時，tabindex 采用 +1的方式，去查找下一元素，所在頁面設(shè)置 tabindex 屬性時，一定要連續(xù)，否則在斷續(xù)的地方，將不起作用。
以上這篇為JQuery EasyUI 表單組件增加"焦點切換"功能的方法就是小編分享給大家的全部內(nèi)容了，希望能給大家一個參考，也希望大家多多支持武林網(wǎng)。
新聞熱點
疑難解答
