為JQuery EasyUI 表單組件增加“焦點切換”功能

標籤：class   parse   按鍵事件   沒有   efi   ret   put   abi   image   

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 屬性時，一定要連續，否則在斷續的地方，將不起作用。

 

為JQuery EasyUI 表單組件增加“焦點切換”功能