javascript - 将数据扫描到 mvc web 应用程序然后改变焦点

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，而不是等于或大于 2。不过，您可以执行以下操作:

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

您可能还想缩放此代码，它会自动递增到下一个可用的 id 以获得焦点。