为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插件HighCharts绘制简单2D折线图效果示例【附demo源码】
Mar 21 jQuery
jQuery插件FusionCharts绘制ScrollColumn2D图效果示例【附demo源码下载】
Mar 22 jQuery
jQuery实现可兼容IE6的淡入淡出效果告警提示功能示例
Sep 20 jQuery
基于jQuery中ajax的相关方法汇总(必看篇)
Nov 08 jQuery
jQuery封装animate.css的实例
Jan 04 jQuery
(模仿京东用户注册)用JQuery实现简单表单验证,初学者必看
Jan 08 jQuery
jQuery实现百度图片移入移出内容提示框上下左右移动的效果
Jun 05 jQuery
Jquery遍历筛选数组的几种方法和遍历解析json对象,Map()方法详解以及数组中查询某值是否存在
Jan 18 jQuery
详解JavaScript原生封装ajax请求和Jquery中的ajax请求
Feb 14 jQuery
jQuery层叠选择器用法实例分析
Jun 28 jQuery
Jquery让form表单异步提交代码实现
Nov 14 jQuery
jQuery实现轮播图效果demo
Jan 11 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
建立动态的WML站点(三)
2006/10/09 PHP
php 生成Tab键或逗号分隔的CSV
2016/09/24 PHP
checkbox 复选框不能为空
2009/07/11 Javascript
利用javascript的面向对象的特性实现限制试用期
2011/08/04 Javascript
Uglifyjs(JS代码优化工具)入门 安装使用
2020/04/13 Javascript
javascript元素动态创建实现方法
2015/05/13 Javascript
Javascript中实现String.startsWith和endsWith方法
2015/06/10 Javascript
使用canvas实现仿新浪微博头像截取上传功能
2015/09/02 Javascript
js实现鼠标点击左上角滑动菜单效果代码
2015/09/06 Javascript
js图片轮播特效代码分享
2015/09/07 Javascript
JS脚本实现动态给标签控件添加事件的方法
2016/06/02 Javascript
JavaScript实现短信倒计时60s
2017/10/09 Javascript
Mac 安装 nodejs方法(图文详细步骤)
2017/10/30 NodeJs
JS实现页面数据懒加载
2020/02/13 Javascript
原生JavaScript实现留言板
2021/01/10 Javascript
js中延迟加载和预加载的具体使用
2021/01/14 Javascript
[01:28:43]2014 DOTA2华西杯精英邀请赛5 24 DK VS CIS
2014/05/25 DOTA
python中itertools模块zip_longest函数详解
2018/06/12 Python
Python初学者需要注意的事项小结(python2与python3)
2018/09/26 Python
python3实现从kafka获取数据,并解析为json格式,写入到mysql中
2019/12/23 Python
Python基于当前时间批量创建文件
2020/05/07 Python
详解Python IO编程
2020/07/24 Python
python如何运行js语句
2020/09/09 Python
基于HTML5 Canvas 实现商场监控实例详解
2017/11/20 HTML / CSS
html5摇一摇代码优化包括DeviceMotionEvent等等
2014/09/01 HTML / CSS
快速实现一个简单的canvas迷宫游戏的示例
2018/07/04 HTML / CSS
Bibloo匈牙利:女装、男装、童装及鞋子和配饰
2019/04/14 全球购物
Stutterheim瑞典:瑞典高级外套时装品牌
2019/06/24 全球购物
安全教育实施方案
2014/03/02 职场文书
工商企业管理应届生求职信
2014/05/04 职场文书
经管应届生求职信范文
2014/05/18 职场文书
松材线虫病防治方案
2014/06/15 职场文书
幼儿园清明节活动总结
2014/07/04 职场文书
公司周年庆活动方案
2014/08/25 职场文书
实验心得体会
2014/09/05 职场文书
HTML5页面打开微信小程序功能实现
2022/09/23 HTML / CSS