為JQuery EasyUI 表單元件增加焦點切換功能實例分享

本文主要為大家帶來一篇為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中文網其他相關文章！