为JQuery EasyUI 表单组件增加焦点切换功能的方法

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 表单组件增加"焦点切换"功能的方法就是小编分享给大家的全部内容了，希望能给大家一个参考，也希望大家多多支持。

# jquery表单增加焦点 # jqueryUI tab标签页代码分享 # jquery-easyui关闭tab自动切换到前一个tab # jQuery EasyUI API 中文文档 - Tabs标签页/选项卡 # jQuery EasyUI Tab 选项卡问题小结 # Jquery Easyui选项卡组件Tab使用详解（10） # 关于jQuery EasyUI 中刷新Tab选项卡后一个页面变形的解决方法 # jQuery UI制作选项卡（tabs） # jQuery EasyUI 选项卡面板tabs的使用实例讲解 # Jquery组件easyUi实现选项卡切换示例 # jquery ui 实现 tab标签功能示例【测试可用】 # 下一 # 表单 # 给大家 # 而定 # 这一 # 第一个 # 是由 # 回车键 # 希望能 # 自定义 # 这篇 # 将不 # 则在 # 小编 # 大家多多 # 进行了 # 设置成 # 后为 # 客户端 # 判断是否

返回目录在线咨询

上一篇：老生常谈javascript中逻辑运算符&&和||的返回值问题
下一篇：建站服务器去哪租具备高可用性？评估确保业务连续性的服务器选项

您的项目需求

*请认真填写需求信息，我们会在24小时内与您取得联系。

全网整合营销服务商

为JQuery EasyUI 表单组件增加焦点切换功能的方法

您的项目需求