JQuery易用户表单组件添加焦点切换功能的方法

1.背景描述

当使用jqueryasyyui的各种表单组件时，实际的客户端页面元素由jqueryasyyui生成，元素的焦点被切换。虽然可以正常使用Tab键，但是顺序控制属性tabindex不起作用，因为页面上看到的元素都是生成的，没有tabindex属性，真正的元素是隐藏的。本文使用用户自定义函数在Tab和ENTER之间切换焦点。

2.函数定义

通过逐件捕获窗口，回车和Tab键被切换到热点。根据当前焦点，先获取所需tabindex属性，加1后，获取下一个焦点元素的属性值，根据该属性找到下一个焦点元素，设置为焦点。

//添加函数addchangefocusope () {$ (window)。keydown(函数(事件){//key event if(事件。keycode==13 | |事件。keycode==9)//Enter或tab { var tabindex=$($(' : focus ')。parent () [0])。prev()。attr(' tabindex ')；//获取(当前焦点-父元素-上一个元素)的tabindex属性。结构依赖于jQuery EasyUI生成的页面结构。if(tabindex！=undefined){ var nextIndex=ParSeint(tabindex)1；//tabindex下一个焦点元素var的编号next input=$(' input[tabindex=' next index ' ']')；//查找下一个焦点元素if(nextinput . length 0)；{ var nextObj=$(nextInput[0])；var options=nextobj . attr(' data-options ')；//设置属性值，用于判断是否为“文本区”var focus obj=$(下一次输入[0])。下一个(' span ')。find(' input ')；//元素-下一个跨度元素-内部输入。该结构取决于jQuery EasyUI if (options)生成的页面结构。的索引(' multiline: true ')！=-1) {//要设置焦点的元素是“文本区域”focusobj=nextobj。下一个(' span ')。find(' text area ')；} FocusObj . Focus()；//设置焦点}}}如果(event.keyCode==9) {//对于tab键，取消其原有功能，因为上面的焦点转换已经完成。} });}3.使用

(1)页面调用功能

$(function(){ $(“# code”))。下一个(' span ')。查找('输入')。焦点()；//第一个元素设置焦点addChangeFocusOpe()；//在页面上添加焦点切换操作})；(2)为表单元素设置tabindex属性

4.制约和限制

当函数实现时，tabindex使用1的方式来查找下一个元素。当在页面上设置tabindex属性时，它必须是连续的，否则它将无法在间歇的地方工作。

以上在JQuery 易UI表单组件中增加‘焦点切换’功能的方法，就是边肖和大家分享的全部内容。希望能给大家一个参考，支持我们。