建站
咨詢
售后
建站咨詢
新聞中心
小編給大家分享一下如何為JQuery EasyUI表單組件增加焦點(diǎn)切換功能，希望大家閱讀完這篇文章之后都有所收獲，下面讓我們一起去探討吧！
創(chuàng)新互聯(lián)建站主營(yíng)木壘哈薩克網(wǎng)站建設(shè)的網(wǎng)絡(luò)公司,主營(yíng)網(wǎng)站建設(shè)方案,成都app軟件開(kāi)發(fā)公司,木壘哈薩克h5重慶小程序開(kāi)發(fā)搭建,木壘哈薩克網(wǎng)站營(yíng)銷推廣歡迎木壘哈薩克等地區(qū)企業(yè)咨詢1、背景說(shuō)明
在使用 JQuery EasyUI 各表單組件時(shí)，實(shí)際客戶端頁(yè)面元素是由 JQuery EasyUI 生成的，元素的焦點(diǎn)切換，雖然 Tab 鍵可以正常用，但順序控制屬性 tabindex不起作用，因?yàn)轫?yè)面看到的元素，是生成的，沒(méi)有tabindex 屬性，而真實(shí)的元素被隱藏了。本文通過(guò)一個(gè)自定義函數(shù)，實(shí)現(xiàn)Tab和回車(chē)鍵的焦點(diǎn)切換功能。
2、函數(shù)定義
通過(guò)捕獲窗口按件，對(duì)回車(chē)和Tab鍵進(jìn)行了熱點(diǎn)切換處理。先根據(jù)當(dāng)前焦點(diǎn)，獲取需要tabindex 屬性，加1后為下一焦點(diǎn)無(wú)素的屬性值，根據(jù)這一屬性找到下一焦點(diǎn)元素，并設(shè)置成焦點(diǎn)。
//增加改變焦點(diǎn)操作
function addChangeFocusOpe()
{
$(window).keydown(function(event){//按鍵事件
if(event.keyCode==13 || event.keyCode==9) //回車(chē) 或 tab鍵
{
var tabindex = $($(':focus').parent()[0]).prev().attr("tabindex"); //取（當(dāng)前焦點(diǎn)--父元素--前一元素）的 tabindex 屬性。該結(jié)構(gòu)根據(jù)jQuery EasyUI生成的頁(yè)面結(jié)構(gòu)而定。
if(tabindex != undefined)
{
var nextIndex = parseInt(tabindex) + 1; //下一焦點(diǎn)元素tabindex編號(hào)
var nextInput = $("input[tabindex='"+nextIndex+"']"); //查找下一焦點(diǎn)元素
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生成的頁(yè)面結(jié)構(gòu)而定
if(options.indexOf("multiline:true") != -1)
{//要設(shè)置焦點(diǎn)的元素是“文本區(qū)域”
focusObj = nextObj.next('span').find('textarea');
}
focusObj.focus(); //設(shè)置焦點(diǎn)
}
}
}
if(event.keyCode==9)
{//對(duì)于tab鍵，則取消其本有功能，因?yàn)樯厦嬉淹瓿山裹c(diǎn)轉(zhuǎn)換
return false;
}
});
}3、使用方式
（1）頁(yè)面調(diào)用函數(shù)
$(function(){
$('#code').next('span').find('input').focus(); //第一個(gè)元素設(shè)置焦點(diǎn)
addChangeFocusOpe(); //頁(yè)面增加焦點(diǎn)切換操作
});（2）表單元素設(shè)置 tabindex 屬性
4、約束和限制
由于函數(shù)實(shí)現(xiàn)時(shí)，tabindex 采用 +1的方式，去查找下一元素，所在頁(yè)面設(shè)置 tabindex 屬性時(shí)，一定要連續(xù)，否則在斷續(xù)的地方，將不起作用。
看完了這篇文章，相信你對(duì)“如何為JQuery EasyUI表單組件增加焦點(diǎn)切換功能”有了一定的了解，如果想了解更多相關(guān)知識(shí)，歡迎關(guān)注創(chuàng)新互聯(lián)網(wǎng)站建設(shè)公司行業(yè)資訊頻道，感謝各位的閱讀！
另外有需要云服務(wù)器可以了解下創(chuàng)新互聯(lián)建站www.cdcxhl.com，海內(nèi)外云服務(wù)器15元起步，三天無(wú)理由+7*72小時(shí)售后在線，公司持有idc許可證，提供“云服務(wù)器、裸金屬服務(wù)器、高防服務(wù)器、香港服務(wù)器、美國(guó)服務(wù)器、虛擬主機(jī)、免備案服務(wù)器”等云主機(jī)租用服務(wù)以及企業(yè)上云的綜合解決方案，具有“安全穩(wěn)定、簡(jiǎn)單易用、服務(wù)可用性高、性價(jià)比高”等特點(diǎn)與優(yōu)勢(shì)，專為企業(yè)上云打造定制，能夠滿足用戶豐富、多元化的應(yīng)用場(chǎng)景需求。
文章標(biāo)題：如何為JQueryEasyUI表單組件增加焦點(diǎn)切換功能-創(chuàng)新互聯(lián)
URL標(biāo)題：http://www.ef60e0e.cn/article/copgjd.html
