本文主要為大家帶來一篇為JQuery EasyUI 表單元件增加焦點切換功能的方法。小編覺得蠻不錯的，現在就分享給大家，也給大家做個參考。一起跟著小編過來看看吧，希望能幫助大家。
1、背景說明
在使用JQuery EasyUI 各表單元件時，實際客戶端頁面元素是由 JQuery EasyUI 產生的，元素的焦點切換，雖然Tab 鍵可以正常用，但順序控制屬性 tabindex 不起作用，因為頁面看到的元素，是產生的，沒有tabindex 屬性，而真實的元素被隱藏了。本文透過一個自訂函數，實現Tab 和 回車鍵的焦點切換功能。
2、函數定義
透過捕獲視窗按件，對回車和Tab鍵進行了熱點切換處理。先根據目前焦點，取得需要tabindex 屬性，加1後為下一焦點無素的屬性值，根據此屬性找到下一焦點元素，並設定成焦點。
//增加改变焦点操作
function addChangeFocusOpe()
{
$(window).keydown(function(event){//按键事件
if(event.keyCode==13 || event.keyCode==9) //回车 或 tab键
{
var tabindex = $($(':focus').parent()[0]).prev().attr("tabindex"); //取（当前焦点--父元素--前一元素）的 tabindex 属性。该结构根据jQuery EasyUI生成的页面结构而定。
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"); //设置的属性值，用于判断是否是“文本区域”
var focusObj = $(nextInput[0]).next('span').find('input'); //元素--下一span元素 --内部input。该结构根据jQuery EasyUI生成的页面结构而定
if(options.indexOf("multiline:true") != -1)
{//要设置焦点的元素是“文本区域”
focusObj = nextObj.next('span').find('textarea');
}
focusObj.focus(); //设置焦点
}
}
}
if(event.keyCode==9)
{//对于tab键，则取消其本有功能，因为上面已完成焦点转换
return false;
}
});
}3、使用方式
（1）頁面呼叫函數
$(function(){
$('#code').next('span').find('input').focus(); //第一个元素设置焦点
addChangeFocusOpe(); //页面增加焦点切换操作
});（2）表單元素設定 tabindex 屬性
4、約束與限制
由於函數實現時，tabindex 採用+1的方式，去尋找下一元素，所在頁面設定 tabindex 屬性時，一定要連續，否則在斷斷續續的地方，將不起作用。
相關推薦：
JavaScript 回車 焦點切換_javascript技巧
基於Jquery的回車成tab焦點切換效果代碼( Enter To Tab )_jquery
JavaScript中焦點進入文字方塊內關閉輸入法的實作核心程式碼分享
以上是為JQuery EasyUI 表單元件增加焦點切換功能實例分享的詳細內容。更多資訊請關注PHP中文網其他相關文章！
