小編給大家分享一下如何為JQuery EasyUI表單組件增加焦點切換功能，希望大家閱讀完這篇文章之后都有所收獲，下面讓我們一起去探討吧！

成都創(chuàng)新互聯(lián)公司服務(wù)項目包括城口網(wǎng)站建設(shè)、城口網(wǎng)站制作、城口網(wǎng)頁制作以及城口網(wǎng)絡(luò)營銷策劃等。多年來，我們專注于互聯(lián)網(wǎng)行業(yè)，利用自身積累的技術(shù)優(yōu)勢、行業(yè)經(jīng)驗、深度合作伙伴關(guān)系等，向廣大中小型企業(yè)、政府機構(gòu)等提供互聯(lián)網(wǎng)行業(yè)的解決方案，城口網(wǎng)站推廣取得了明顯的社會效益與經(jīng)濟效益。目前，我們服務(wù)的客戶以成都為中心已經(jīng)輻射到城口省份的部分城市，未來相信會繼續(xù)擴大服務(wù)區(qū)域并繼續(xù)獲得客戶的支持與信任！

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表單組件增加焦點切換功能”有了一定的了解，如果想了解更多相關(guān)知識，歡迎關(guān)注創(chuàng)新互聯(lián)行業(yè)資訊頻道，感謝各位的閱讀！

當前題目：如何為JQueryEasyUI表單組件增加焦點切換功能
瀏覽地址：http://www.chinadenli.net/article2/goocic.html

成都網(wǎng)站建設(shè)公司_創(chuàng)新互聯(lián)，為您提供網(wǎng)站改版、ChatGPT、品牌網(wǎng)站設(shè)計、網(wǎng)站導航、網(wǎng)站制作、網(wǎng)頁設(shè)計公司

廣告

聲明：本網(wǎng)站發(fā)布的內(nèi)容（圖片、視頻和文字）以用戶投稿、用戶轉(zhuǎn)載內(nèi)容為主，如果涉及侵權(quán)請盡快告知，我們將會在第一時間刪除。文章觀點不代表本網(wǎng)站立場，如需處理請聯(lián)系客服。電話：028-86922220；郵箱：631063699@qq.com。內(nèi)容未經(jīng)允許不得轉(zhuǎn)載，或轉(zhuǎn)載時需注明來源： 創(chuàng)新互聯(lián)