Question

我正在编写一个小型数据库，我可以将多个条形码扫描到不同的文本框中，然后保存数据。条形码数据的长度可能会有一些变化，我想在条形码完成扫描后将焦点移动到下一个文本框。

这是我视图中的最新代码，其中我给每个文本框一个id然后我使用jquery在第一个文本框达到一定长度后专注于下一个id。

<!--This is for entering the PartNumber-->
<div class="form-group">
    @Html.LabelFor(model => model.PartNum, 
       htmlAttributes: new { @class = "control-label col-md-2" })
    @Html.TextBoxFor(model => model.PartNum, 
       new { htmlAttributes = new { @class = "form-control", id="focus1"} })
    @Html.ValidationMessageFor(model => model.PartNum, "", 
       new { @class = "text-danger" })
</div>

        <!--This is for entering the Aisle-->
        <div class="form-group">
            @Html.LabelFor(model => model.Aisle, 
               htmlAttributes: new { @class = "control-label col-md-2" })
            @Html.TextBoxFor(model => model.Aisle, 
                new { htmlAttributes = new { @class = "form-control",id="focus2" } })
            @Html.ValidationMessageFor(model => model.Aisle, "", new { @class = "text-danger" })
        </div>

这是我的jquery代码

$('input[id=focus').keyup(function () {
        if (this.value.length == 2) {
            $('input[id=focus2]').focus();
        }
    });

从代码中我可以看出，在将2个字符输入/扫描到第一个文本框后，这应该将焦点移到下一个文本框，但这不起作用。

我希望在完成可变长度的条形码扫描后进行焦点更改，但不知道如何执行此操作。

在我的代码中我做错了什么，不会让焦点更改到下一个文本框？

Answer 1

更新

您可以尝试以下方法：

$('input[id*="focus"]').each(function () {
     if($(this).val().length >= 2) {
          $(this).next().focus();
     }
});

我不确定你的结构，但jQuery很直接。使用单词focus遍历每个元素，如果值大于2，则将焦点移动到下一个元素。（可能必须调整旁边的正确元素）

这也会产生一些开销，因为每次迭代都会发生循环。

我不确定keyup事件是否会被触发。此外，您确保它等于2，不等于或更大。您可以执行以下操作：

$('input[id=focus]).change(function (event) {
     event.preventDefault();
     if($(this).val().length >= 2) {
          $('input[id=focus2]').focus();
     }
});

您可能还希望缩放此代码，并自动增加到下一个可用的id焦点。

Answer 2

我发现我遇到的主要问题是我忘记了 $(function(){ 在我的代码开头。关于我能够解决的主要解决方案。

$(function(){
    $('#focus1').keyup(function(){
        if(!_timeoutRunning){
            _timeoutRunning=true;
            setTimeout(function(){checkKey();}, 2000);
        }
    });
});

var _timeoutRunning = false;

function checkKey(){
    _timeoutRunning = false;
    if($('#focus1').val().length >= 7)
        $('#focus2').focus();
}

此代码允许我扫描长度为7或更长的条形码，然后扫描第7个字符后的2秒，将焦点更改为下一个ID

将数据扫描到mvc Web应用程序然后更改焦点

2 个答案: