为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绘制2D双折线图效果示例【附demo源码】
Apr 14 jQuery
jQuery extend()详解及简单实例
May 06 jQuery
jquery append与appendTo方法比较
May 24 jQuery
基于jQuery和CSS3实现APPLE TV海报视差效果
Jun 16 jQuery
基于jquery日历价格、库存等设置插件
Jul 05 jQuery
jQuery实现简单日期格式化功能示例
Sep 19 jQuery
利用JQUERY实现多个AJAX请求等待的实例
Dec 14 jQuery
jQuery中库的引用方法
Jan 06 jQuery
jQuery实现的页面详情展开收起功能示例
Jun 11 jQuery
jquery实现联想词搜索框和搜索结果分页的示例
Oct 10 jQuery
jquery获取并修改触发事件的DOM元素示例【基于target 属性】
Oct 10 jQuery
jquery简易手风琴插件的封装
Oct 13 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
PHP更新购物车数量(表单部分/PHP处理部分)
2013/05/03 PHP
PHP+Redis 消息队列 实现高并发下注册人数统计的实例
2018/01/29 PHP
Laravel 中使用简单的方法跟踪用户是否在线(推荐)
2019/10/30 PHP
解决FireFox下[使用event很麻烦]的问题
2006/11/26 Javascript
JavaScript网页制作特殊效果用随机数
2007/05/22 Javascript
js监听表单value的修改同步问题,跨浏览器支持
2009/12/31 Javascript
JavaScript中的View-Model使用介绍
2011/08/11 Javascript
jquery可见性过滤选择器使用示例
2013/06/24 Javascript
JavaScript中通过prototype属性共享属性和方法的技巧实例
2015/03/13 Javascript
js编写贪吃蛇的小游戏
2020/08/24 Javascript
jQuery实现的超链接提示效果示例【附demo源码下载】
2016/09/09 Javascript
JavaScript定义数组的三种方法(new Array(),new Array('x','y')
2016/10/04 Javascript
JS判断鼠标进入容器的方向与window.open新窗口被拦截的问题
2016/12/23 Javascript
node.js发送邮件email的方法详解
2017/01/06 Javascript
javascript设计模式之策略模式学习笔记
2017/02/15 Javascript
js实现下一页页码效果
2017/03/07 Javascript
Nodejs中crypto模块的安全知识讲解
2018/01/03 NodeJs
详解多页应用 Webpack4 配置优化与踩坑记录
2018/10/16 Javascript
Postman动态获取返回值过程详解
2020/06/30 Javascript
[03:10]超级美酒第四天 fy拉比克秀 大合集
2018/06/05 DOTA
Django与遗留的数据库整合的方法指南
2015/07/24 Python
python实现多线程的两种方式
2016/05/22 Python
matplotlib设置legend图例代码示例
2017/12/19 Python
python3解析库pyquery的深入讲解
2018/06/26 Python
使用python验证代理ip是否可用的实现方法
2018/07/25 Python
pycharm远程开发项目的实现步骤
2019/01/20 Python
pycharm内无法import已安装的模块问题解决
2020/02/12 Python
python3获取控制台输入的数据的具体实例
2020/08/16 Python
Windows环境下Python3.6.8 importError: DLLload failed:找不到指定的模块
2020/11/01 Python
python爬虫判断招聘信息是否存在的实例代码
2020/11/20 Python
Ubuntu16安装Python3.9的实现步骤
2020/12/15 Python
SCDKey德国:全球领先的数字游戏市场
2019/04/09 全球购物
鞋类设计与工艺专业销售求职信
2013/11/01 职场文书
先进员工获奖感言
2014/08/14 职场文书
领导新年致辞2016
2015/07/29 职场文书
SpringBoot项目中控制台日志的保存配置操作
2021/06/18 Java/Android