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


Posted in jQuery onApril 13, 2017

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 属性

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

4、约束和限制

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

以上这篇为JQuery EasyUI 表单组件增加"焦点切换"功能的方法就是小编分享给大家的全部内容了,希望能给大家一个参考,也希望大家多多支持三水点靠木。

jQuery 相关文章推荐
jQuery插件FusionCharts实现的MSBar2D图效果示例【附demo源码】
Mar 24 jQuery
关于jquery form表单序列化的注意事项详解
Aug 01 jQuery
详解jquery选择器的原理
Aug 01 jQuery
jQuery EasyUI开发技巧总结
Sep 26 jQuery
jQuery实现打开网页自动弹出遮罩层或点击弹出遮罩层功能示例
Oct 19 jQuery
jquery中有哪些api jQuery主要API
Nov 20 jQuery
jQuery实现滚动到底部时自动加载更多的方法示例
Feb 18 jQuery
jQuery插件Validation表单验证详解
May 26 jQuery
jQuery实现颜色打字机的完整代码
Mar 19 jQuery
jQuery实现开关灯效果
Aug 02 jQuery
基于JQuery和DWR实现异步数据传递
Oct 16 jQuery
jquery实现抽奖功能
Oct 22 jQuery
详谈jQuery.load()和Jsp的include的区别
Apr 12 #jQuery
使用jQuery和ajax代替iframe的方法(详解)
Apr 12 #jQuery
jQuery用noConflict代替$的实现方法
Apr 12 #jQuery
jQuery判断邮箱格式对错实例代码讲解
Apr 12 #jQuery
jquery 校验中国身份证号码实例详解
Apr 11 #jQuery
基于jQuery实现瀑布流页面
Apr 11 #jQuery
jQuery插件FusionCharts绘制的2D双面积图效果示例【附demo源码】
Apr 11 #jQuery
You might like
c#中的实现php中的preg_replace
2009/12/21 PHP
PHP set_error_handler()函数使用详解(示例)
2013/11/12 PHP
PHP上传文件时文件过大$_FILES为空的解决方法
2013/11/26 PHP
PHP sdk实现在线打包代码示例
2020/12/09 PHP
js模仿jquery的写法示例代码
2013/06/16 Javascript
基于jquery的simpleValidate简易验证插件
2014/01/31 Javascript
跟我学Nodejs(二)--- Node.js事件模块
2014/05/21 NodeJs
javascript中使用new与不使用实例化对象的区别
2015/06/22 Javascript
JS实现获取键盘按下的按键并显示在页面上的方法
2015/11/04 Javascript
jQuery实现批量判断表单中文本框非空的方法(2种方法)
2015/12/09 Javascript
浅谈json取值(对象和数组)
2016/06/24 Javascript
微信小程序 教程之引用
2016/10/18 Javascript
Javascript 获取鼠标当前的位置实现方法
2016/10/27 Javascript
Jquery EasyUI $.Parser
2017/06/02 jQuery
vue+webpack 打包文件 404 页面空白的解决方法
2018/02/28 Javascript
微信小程序手机号码验证功能的实例代码
2018/08/28 Javascript
简述pm2常用命令集合及配置文件说明
2019/05/30 Javascript
深入解析koa之异步回调处理
2019/06/17 Javascript
vue实现鼠标移过出现下拉二级菜单功能
2019/12/12 Javascript
原生js实现五子棋游戏
2020/05/28 Javascript
python访问纯真IP数据库的代码
2011/05/19 Python
Python通过PIL获取图片主要颜色并和颜色库进行对比的方法
2015/03/19 Python
python3安装pip3(install pip3 for python 3.x)
2018/04/03 Python
python实现共轭梯度法
2019/07/03 Python
Python filter过滤器原理及实例应用
2020/08/18 Python
Free People中国官网:波西米亚风格女装服饰
2016/08/30 全球购物
德国价格合理的品牌商品购物网站:averdo
2019/03/21 全球购物
高级护理专业大学生求职信
2013/10/24 职场文书
11月红领巾广播稿
2014/01/17 职场文书
七年级政治教学反思
2014/02/03 职场文书
意外死亡赔偿协议书
2014/10/14 职场文书
2014年营业员工作总结
2014/11/18 职场文书
销售经理工作检讨书
2015/02/19 职场文书
Java实现经典游戏泡泡堂的示例代码
2022/04/04 Java/Android
室外天线与收音机天线杆接合方法
2022/04/05 无线电
MySQL数据库简介与基本操作
2022/05/30 MySQL