Example sharing of adding focus switching function to JQuery EasyUI form component

This article mainly brings you a method to add focus switching function to JQuery EasyUI form component. The editor thinks it is quite good, so I will share it with you now and give it as a reference for everyone. Let’s follow the editor to take a look, I hope it can help everyone.

1. Background description

When using each form component of JQuery EasyUI, the actual client page elements are generated by JQuery EasyUI. The focus of the element switches. Although the Tab key can be used normally, The order control attribute tabindex does not work because the elements seen on the page are generated without the tabindex attribute, and the real elements are hidden. This article uses a custom function to implement the focus switching function of the Tab and Enter keys.

2. Function definition

By capturing window clicks, hotspot switching processing is performed on the Enter and Tab keys. First, according to the current focus, obtain the required tabindex attribute, add 1 to the attribute value of the next focus element, find the next focus element based on this attribute, and set it as the focus.

//增加改变焦点操作
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. Usage

(1) Page call function

$(function(){ 
 $('#code').next('span').find('input').focus(); //第一个元素设置焦点 
 addChangeFocusOpe(); //页面增加焦点切换操作 
});

(2) Form element setting tabindex attribute

4. Constraints and limitations

Due to the function implementation, tabindex uses +1 to find the next element. When setting the tabindex attribute on the page, it must be continuous, otherwise it will be in discontinuous places. will not work.

Related recommendations:

JavaScript Carriage Enter focus switching_javascript skills

Jquery-based carriage return to tab focus switching effect code ( Enter To Tab )_jquery

Sharing the core code for the implementation of closing the input method when the focus enters the text box in JavaScript

The above is the detailed content of Example sharing of adding focus switching function to JQuery EasyUI form component. For more information, please follow other related articles on the PHP Chinese website!