Shulou(Shulou.com)06/01 Report--

This article mainly introduces how to increase the focus switching function for the JQuery EasyUI form component related knowledge, the content is detailed and easy to understand, the operation is simple and fast, has a certain reference value, I believe that after reading this article on how to increase the focus switching function for the JQuery EasyUI form component will have a harvest, let's take a look.

1. Background description

When using each form component of JQuery EasyUI, the actual client page element is generated by JQuery EasyUI, the focus of the element is switched, although the Tab key can be used normally, but the order control attribute tabindex does not work, because the element seen on the page is generated, there is no tabindex attribute, and the real element is hidden. In this paper, the focus switching function of Tab and enter key is realized through a custom function.

2. Function definition

By capturing the window button, the enter and Tab keys are processed for hot spot switching. First, according to the current focus, get the attribute that requires tabindex, add 1 to the attribute value without elements for the next focus, find the next focus element according to this attribute, and set it to focus.

/ / add function addChangeFocusOpe () {$(window) .keydown (function (event) {/ / key event if (event.keyCode==13 | | event.keyCode==9) / / enter or tab key {var tabindex = $($(': focus'). Parent () [0]). Prev (). Attr ("tabindex"); / / take the tabindex attribute of the current focus-parent element-the previous element. This structure depends on the page structure generated by jQuery EasyUI. If (tabindex! = undefined) {var nextIndex = parseInt (tabindex) + 1; / / next focus element tabindex number var nextInput = $("input [tabindex='" + nextIndex+ "']"); / / find the next focus element if (nextInput.length > 0); {var nextObj = $(nextInput [0]); var options = nextObj.attr ("data-options") / / the attribute value set to determine whether the "text area" var focusObj = $(nextInput [0]). Next ('span'). Find (' input'); / / element-- the next span element-- internal input. This structure depends on the page structure generated by jQuery EasyUI if (options.indexOf ("multiline:true")! =-1) {/ / the element to focus is "text area" focusObj = nextObj.next ('span'). Find (' textarea');} focusObj.focus () / / set focus}} if (event.keyCode==9) {/ / for the tab key, cancel its original function because the focus conversion has been completed above return false;}});}

3. Mode of use

(1) the page calls the function

$(function () {$('# code') .next ('span') .find (' input') .focus (); / / the first element sets the focus addChangeFocusOpe (); / / the page adds focus switching operation})

(2) the form element sets the tabindex attribute

4. Constraints and restrictions

Because the function is implemented, tabindex uses the + 1 way to find the next element. When setting the tabindex attribute on the page, it must be continuous, otherwise in the intermittent place, it will not work.

This is the end of the article on "how to add focus switching to JQuery EasyUI form components". Thank you for reading! I believe that everyone has a certain understanding of the knowledge of "how to add focus switching function to JQuery EasyUI form components". If you want to learn more, you are welcome to follow the industry information channel.

Welcome to subscribe "Shulou Technology Information " to get latest news, interesting things and hot topics in the IT industry, and controls the hottest and latest Internet news, technology news and IT industry trends.