為JQuery EasyUI 表單組件增加焦點(diǎn)切換功能的方法
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 和 回車鍵的焦點(diǎn)切換功能。
2、函數(shù)定義
通過(guò)捕獲窗口按件,對(duì)回車和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) //回車 或 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ù)的地方,將不起作用。
以上這篇為JQuery EasyUI 表單組件增加"焦點(diǎn)切換"功能的方法就是小編分享給大家的全部?jī)?nèi)容了,希望能給大家一個(gè)參考,也希望大家多多支持腳本之家。
- jqueryUI tab標(biāo)簽頁(yè)代碼分享
- jquery-easyui關(guān)閉tab自動(dòng)切換到前一個(gè)tab
- jQuery EasyUI API 中文文檔 - Tabs標(biāo)簽頁(yè)/選項(xiàng)卡
- jQuery EasyUI Tab 選項(xiàng)卡問(wèn)題小結(jié)
- Jquery Easyui選項(xiàng)卡組件Tab使用詳解(10)
- 關(guān)于jQuery EasyUI 中刷新Tab選項(xiàng)卡后一個(gè)頁(yè)面變形的解決方法
- jQuery UI制作選項(xiàng)卡(tabs)
- jQuery EasyUI 選項(xiàng)卡面板tabs的使用實(shí)例講解
- Jquery組件easyUi實(shí)現(xiàn)選項(xiàng)卡切換示例
- jquery ui 實(shí)現(xiàn) tab標(biāo)簽功能示例【測(cè)試可用】
相關(guān)文章
jQuery Ajax前后端使用JSON進(jìn)行交互示例
本篇文章主要介紹了jQuery Ajax前后端使用JSON進(jìn)行交互示例,實(shí)現(xiàn)前端通過(guò)jQuery Ajax傳輸json到后端,后端接收json,對(duì)json進(jìn)行處理,后端返回一個(gè)json給前端,有興趣的可以了解一下。2017-03-03jQuery控制網(wǎng)頁(yè)打印指定區(qū)域的方法
這篇文章主要介紹了jQuery控制網(wǎng)頁(yè)打印指定區(qū)域的方法,涉及jQuery操作html元素的技巧,非常具有實(shí)用價(jià)值,需要的朋友可以參考下2015-04-04jsTree 基于JQuery的排序節(jié)點(diǎn) Bug
jsTree(JQuery) 排序節(jié)點(diǎn) Bug的解決方法。2011-07-07HTML5+jQuery實(shí)現(xiàn)搜索智能匹配功能
本文主要介紹了HTML5+jquery實(shí)現(xiàn)的搜索匹配效果的實(shí)例代碼。具有很好的參考價(jià)值。下面跟著小編一起來(lái)看下吧2017-03-03jQuery checkbox全選/取消全選實(shí)現(xiàn)代碼
用JavaScript使頁(yè)面上的一組checkbox全選/取消全選,邏輯很簡(jiǎn)單,實(shí)現(xiàn)代碼也沒(méi)有太難的語(yǔ)法。但使用jQuery實(shí)現(xiàn)則更簡(jiǎn)單,代碼也很簡(jiǎn)潔,精辟!2009-11-11