怎么为JQuery EasyUI表单组件增加焦点切换功能(easyui,jquery,开发技术)

1、背景说明

在使用 JQueryEasyUI 各表单组件时，实际客户端页面元素是由JQueryEasyUI 生成的，元素的焦点切换，虽然 Tab 键可以正常用，但顺序控制属性tabindex不起作用，因为页面看到的元素，是生成的，没有tabindex 属性，而真实的元素被隐藏了。本文通过一个自定义函数，实现Tab和回车键的焦点切换功能。

2、函数定义

通过捕获窗口按件，对回车和Tab键进行了热点切换处理。先根据当前焦点，获取需要tabindex 属性，加1后为下一焦点无素的属性值，根据这一属性找到下一焦点元素，并设置成焦点。

//增加改变焦点操作functionaddChangeFocusOpe(){$(window).keydown(function(event){//按键事件if(event.keyCode==13||event.keyCode==9)//回车或tab键{vartabindex=$($(':focus').parent()[0]).prev().attr("tabindex");//取（当前焦点--父元素--前一元素）的tabindex属性。该结构根据jQueryEasyUI生成的页面结构而定。if(tabindex!=undefined){varnextIndex=parseInt(tabindex)+1;//下一焦点元素tabindex编号varnextInput=$("input[tabindex='"+nextIndex+"']");//查找下一焦点元素if(nextInput.length>0);{varnextObj=$(nextInput[0]);varoptions=nextObj.attr("data-options");//设置的属性值，用于判断是否是“文本区域”varfocusObj=$(nextInput[0]).next('span').find('input');//元素--下一span元素--内部input。该结构根据jQueryEasyUI生成的页面结构而定if(options.indexOf("multiline:true")!=-1){//要设置焦点的元素是“文本区域”focusObj=nextObj.next('span').find('textarea');}focusObj.focus();//设置焦点}}}if(event.keyCode==9){//对于tab键，则取消其本有功能，因为上面已完成焦点转换returnfalse;}});}

3、使用方式

（1）页面调用函数

$(function(){$('#code').next('span').find('input').focus();//第一个元素设置焦点addChangeFocusOpe();//页面增加焦点切换操作});

（2）表单元素设置tabindex 属性

4、约束和限制

由于函数实现时，tabindex采用 +1的方式，去查找下一元素，所在页面设置tabindex 属性时，一定要连续，否则在断续的地方，将不起作用。