为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 相关文章推荐
js案例之鼠标跟随jquery版(实例讲解)
Jul 21 jQuery
基于jQuery的表单填充实例
Aug 22 jQuery
jQuery实现checkbox的简单操作
Nov 18 jQuery
利用jquery如何从json中读取数据追加到html中
Dec 01 jQuery
jQuery插件Validation表单验证详解
May 26 jQuery
jQuery实现checkbox全选功能完整实例
Jul 12 jQuery
解决jQuery使用append添加的元素事件无效的问题
Aug 30 jQuery
详解jQuery中的easyui
Sep 02 jQuery
jquery+css实现Tab栏切换的代码实例
May 14 jQuery
jQuery实现图片下载代码
Jul 18 jQuery
jQuery实现可编辑的表格
Dec 11 jQuery
jquery实现有过渡效果的tab切换
Jul 17 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
一些操作和快捷键的理解和讨论
2020/03/04 星际争霸
了解咖啡雨林联盟认证 什么是雨林认证 雨林认证是什么意思
2021/03/05 新手入门
三种php连接access数据库方法
2013/11/11 PHP
PHP实现微信提现功能(微信商城)
2019/11/21 PHP
php自动加载代码实例详解
2021/02/26 PHP
新浪中用来显示flash的函数
2007/04/02 Javascript
js如何判断不同系统的浏览器类型
2013/10/28 Javascript
Flexigrid在IE下不显示数据的有效处理方法
2014/09/04 Javascript
nodejs中转换URL字符串与查询字符串详解
2014/11/26 NodeJs
jQuery表单验证之密码确认
2017/05/22 jQuery
几个你不知道的技巧助你写出更优雅的vue.js代码
2018/06/11 Javascript
vue 实现v-for循环回来的数据动态绑定id
2019/11/07 Javascript
Nodejs + Websocket 指定发送及群聊的实现
2020/01/09 NodeJs
vue使用canvas实现移动端手写签名
2020/09/22 Javascript
使用jquery实现轮播图效果
2021/01/02 jQuery
[01:43]深扒TI7聊天轮盘语音出处4
2017/05/11 DOTA
python基础教程之获取本机ip数据包示例
2014/02/10 Python
Python实现新浪博客备份的方法
2016/04/27 Python
在Python中使用AOP实现Redis缓存示例
2017/07/11 Python
python解析html提取数据,并生成word文档实例解析
2018/01/22 Python
Python判断一个三位数是否为水仙花数的示例
2018/11/13 Python
Flask教程之重定向与错误处理实例分析
2019/08/01 Python
Django 5种类型Session使用方法解析
2020/04/29 Python
python 下划线的不同用法
2020/10/24 Python
python中delattr删除对象方法的代码分析
2020/12/15 Python
美国首屈一指的高品质珠宝设计师和零售商:Allurez
2018/01/23 全球购物
请解释virtual关键字的含义
2015/06/17 面试题
幼儿园新学期寄语
2014/01/18 职场文书
教师竞聘演讲稿
2014/05/16 职场文书
少先队辅导员事迹材料
2014/12/24 职场文书
2015年办公室工作总结范文
2015/03/31 职场文书
统招统分证明
2015/06/23 职场文书
小学体育组工作总结2015
2015/07/21 职场文书
老生常谈 使用 CSS 实现三角形的技巧(多种方法)
2021/04/13 HTML / CSS
redis内存空间效率问题的深入探究
2021/05/17 Redis
javascript数组includes、reduce的基本使用
2021/07/02 Javascript