如何为JQueryEasyUI表单组件增加焦点切换功能-创新互联

小编给大家分享一下如何为JQuery EasyUI表单组件增加焦点切换功能,希望大家阅读完这篇文章之后都有所收获,下面让我们一起去探讨吧!

创新互联建站主营木垒哈萨克网站建设的网络公司,主营网站建设方案,成都app软件开发公司,木垒哈萨克h5重庆小程序开发搭建,木垒哈萨克网站营销推广欢迎木垒哈萨克等地区企业咨询

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表单组件增加焦点切换功能”有了一定的了解,如果想了解更多相关知识,欢迎关注创新互联网站建设公司行业资讯频道,感谢各位的阅读!

另外有需要云服务器可以了解下创新互联建站www.cdcxhl.com,海内外云服务器15元起步,三天无理由+7*72小时售后在线,公司持有idc许可证,提供“云服务器、裸金属服务器、高防服务器、香港服务器、美国服务器、虚拟主机、免备案服务器”等云主机租用服务以及企业上云的综合解决方案,具有“安全稳定、简单易用、服务可用性高、性价比高”等特点与优势,专为企业上云打造定制,能够满足用户丰富、多元化的应用场景需求。


网页题目:如何为JQueryEasyUI表单组件增加焦点切换功能-创新互联
标题URL:http://scyanting.com/article/copgjd.html