当输入的字符串到达​​特定字符时，jQuery将焦点更改为下一个输入

Question

我看到很多脚本用于更改输入文本字段焦点的最大长度，但是当当前字段中的文本到达特定字符时，我似乎无法找到任何将光标移动到下一个字段的脚本。我需要这个的原因是因为输入将具有不同的长度，因此不能使用最大长度。例如，我将输入abcd1234！。感叹号（！）将是脚本将焦点更改为下一个字段的关键。我使用以下脚本生成文本字段。

    <div id="myDiv">
    <input type="text" name="qr[]" id="txt_1" autofocus />
</div>
<script>
$('#myDiv').on('keyup', 'input', function() {
    if($(this).val() == ''){
        $(this).next().remove();
        return;
    }
    else if($(this).next().val() == '') {
        console.log('here');
        return;
    }

    var newTxt = $(this).clone();
    var id = newTxt.attr('id');
    newTxt.attr('id', 'txt_' + (parseInt(id.substring(id.indexOf('_') + 1))));
    newTxt.val('');
    $(this).parent().append(newTxt);

});
</script>

Answer 1

这是 JSFiddle ，可以满足您的需求。

＆＃13;

＆＃13;

$('#myDiv').on('keyup', 'input', function (e) {
    if ($(this).val() == '') {
        $(this).next().remove();
        return;
    } else if ($(this).next().val() == '') {
        if (e.keyCode === 49 && e.shiftKey) {
            $(this).next().focus();
        }
        return;
    }

    var newTxt = $(this).clone();
    var id = newTxt.attr('id');
    newTxt.attr('id', 'txt_' + (parseInt(id.substring(id.indexOf('_') + 1))));
    newTxt.val('');
    $(this).parent().append(newTxt);
});

＆＃13;

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
<div id="myDiv">
    <input type="text" name="qr[]" id="txt_1" autofocus />
</div>

＆＃13;

＆＃13;

＆＃13;

基本上，我正在检查事件（该函数中的第一个参数）是否为密钥代码49（ 1 ）密钥以及 Shift < / kbd>按下键。然后我关注下一个元素。

Answer 2

您可以使用类似的东西。在我的例子中，你只需从一个字段切换到第二个字段。 但是如果你有很多具有相同类的字段并且需要从一个字段切换到另一个字段，则可以使用items数组的长度切换到明确的输入。

$('#one').on('input', function(){
    var value = $(this).val();
    if(value[value.length-1] == '!') {
       $('#two').focus();
       }
  });

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<input type="text" id="one">
<input type="text" id="two">