使用 jQuery 的选项卡行为 [英] Tab behavior using jQuery

问题描述

我的表单中有一些文本框.我不知道他们的 id 值.我想通过按 Enter 将光标位置从现有字段更改为下一个字段.
注意第一次时光标可能在不同的位置.

I have a some text boxes in my form. I don't know their id values. I want change the cursor position from the existing one to the next field by pressing Enter.
Pay attention that the cursor may be in different positions at the first time.

你有什么建议?

推荐答案

你没有提供你的标记，所以我不能假设你的结构(例如使用 .next() 如果他们是兄弟元素).所以，假设你有 input 文本，试试这个例子(对于 jQuery 1.7+)

you didn't provide your markup so I can't make assumption about your structure (e.g. using .next() if they are sibling elements). So, supposing you have input text, try this example (for jQuery 1.7+)

$(document).ready(function() {

    var inputs = $('input[type="text"]');
    var len = inputs.length;

    inputs.on('keyup', function(evt) {
        if (evt.keyCode === 13) {
           var currentInput = inputs.index($(this));
           inputs.eq((currentInput < len - 1)
                     ? currentInput + 1
                     : 0).focus();

           evt.preventDefault();
        }
    });
});

当您在最后一个输入上按 enter 时，第一个输入将被聚焦(在一个循环中).查看 jsfiddle 示例:http://jsfiddle.net/8ruDV/

When you press enter on last input, the first input will be focused (in a loop). See a jsfiddle example: http://jsfiddle.net/8ruDV/

这篇关于使用 jQuery 的选项卡行为的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！