为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标签功能示例【测试可用】  # 下一  # 表单  # 给大家  # 而定  # 这一  # 第一个  # 是由  # 回车键  # 希望能  # 自定义  # 这篇  # 将不  # 则在  # 小编  # 大家多多  # 进行了  # 设置成  # 后为  # 客户端  # 判断是否 

相关文章： C#怎么创建控制台应用 C# Console App项目创建方法  建站主机数据库如何配置才能提升网站性能？  如何撰写建站申请书？关键要点有哪些？  企业微网站怎么做,公司网站和公众号有什么区别？  建站三合一如何选？哪家性价比更高？  建站之星官网登录失败？如何快速解决？  深圳网站制作案例,网页的相关名词有哪些？  历史网站制作软件,华为如何找回被删除的网站？  在线ppt制作网站有哪些软件,如何把网页的内容做成ppt？  javascript基本数据类型及类型检测常用方法小结  深圳网站制作平台,深圳市做网站好的公司有哪些？  音乐网站服务器如何优化API响应速度？  教程网站设计制作软件,怎么创建自己的一个网站？  如何零基础开发自助建站系统？完整教程解析  建站主机如何安装配置？新手必看操作指南  制作电商网页,电商供应链怎么做？  建站之星如何快速生成多端适配网站？  如何用狗爹虚拟主机快速搭建网站？  如何选择高效可靠的多用户建站源码资源？  C++如何将C风格字符串（char*）转换为std::string？（代码示例）  建站之星代理平台如何选择最佳方案？  高端建站如何打造兼具美学与转化的品牌官网？  如何通过主机屋免费建站教程十分钟搭建网站？  c# 在ASP.NET Core中管理和取消后台任务  如何在企业微信快速生成手机电脑官网？  如何快速搭建高效服务器建站系统？  公司网站的制作公司,企业网站制作基本流程有哪些？  建站10G流量真的够用吗？如何应对访问高峰？  巅云智能建站系统：可视化拖拽+多端适配+免费模板一键生成  建站主机CVM配置优化、SEO策略与性能提升指南  相亲简历制作网站推荐大全,新相亲大会主持人小萍萍资料？  制作旅游网站html,怎样注册旅游网站？  建站之星如何配置系统实现高效建站？  宝塔面板创建网站无法访问？如何快速排查修复？  个人网站制作流程图片大全,个人网站如何注销？  想学网站制作怎么学,建立一个网站要花费多少？  如何高效利用亚马逊云主机搭建企业网站？  如何挑选高效建站主机与优质域名？  长春网站建设制作公司,长春的网络公司怎么样主要是能做网站的？  详解免费开源的DotNet二维码操作组件ThoughtWorks.QRCode（.NET组件介绍之四）  如何通过远程VPS快速搭建个人网站？  大连网站设计制作招聘信息,大连投诉网站有哪些？  新网站制作渠道有哪些,跪求一个无线渠道比较强的小说网站，我要发表小说？  建站主机功能解析：服务器选择与快速搭建指南  图片制作网站免费软件,有没有免费的网站或软件可以将图片批量转为A4大小的pdf？  如何安全更换建站之星模板并保留数据？  Dapper的Execute方法的返回值是什么意思 Dapper Execute返回值详解  如何制作算命网站,怎么注册算命网站？  惠州网站建设制作推广,惠州市华视达文化传媒有限公司怎么样？  如何在云虚拟主机上快速搭建个人网站？