javascript - 输入数据后立即捕获和处理数据

Question

寻求您关于处理以下问题的好方法的建议。

需要一个用于接收扫描网络表单应用程序的快速输入表单。这将依次收集从包裹上扫描的条形码。

扫描将从蓝牙扫描仪进入输入字段。 扫描后，扫描仪将插入 CR。

此时，我只想捕获数据并将其传递到 Controller 进行处理，清除字段并将控制权立即返回到网页以进行下一次扫描。

最大的两个问题是:

1. 速度 - 速度必须很快，因为他们正在进行实时扫描。
2. 始终使输入字段保持焦点，以便当他们 扫描它们不在屏幕上的其他字段中。它们将从输入字段开始，我只需要确保它们在每次扫描后自动返回到输入字段。

您有什么最好的处理方式吗？

这是我的 HTML:

<input type="text" 
   id="barcode" 
   name="barcode" 
   value="" 
   onchange="location.href='@Url.Action("scanned", "receiveScan")?barcode=' + $('#barcode').val()"><br>

这是 Controller 操作:

 public ActionResult scanned(string barcode)
    {
        //code to process goes here
        return Ok();
    }

然后它将网页重置为空白页。

相反，我需要做的只是清空输入字段并将焦点放回它。

我通过将 Controller 修改为:

   public ActionResult scanned(string barcode)
{
    var test = barcode;
    //code to process goes here
  return  RedirectToAction("receiveScan", "home");

}

但有人指出，重新发布整个页面并不是一个好主意。 一旦我能回来，我就会尝试下面的解决方案之一。

感谢您的帮助，这是有效的代码--

 $('#textArea1').val('Scans - ');
$(function () {
    $("#barcode").on("change", function (e) {
        // get the current value
        var barcode = $('#barcode').val();

        // if there's no text, ignore the event
        if (!barcode) {
            return;
        }
       // clear the textbox
        $("#barcode").val("");

       // var holdit = $('#textArea1').val();
        $('#textArea1').val($('#textArea1').val() +' '+ barcode);
         // post the data using AJAX
    $.post('@Url.Action("scanned", "receiveScan")?barcode=' + barcode);
    });
})

Answer 1

您应该使用 AJAX 调用来确保页面不会完全重新加载，而不是执行完整的回发。

以下是如何执行此操作的示例(未经测试，可能有拼写错误):

<input type="text" id="barcode" name="barcode"/>

$(function() 
{
    $("#barcode").on("change", function (e)
    {
        // get the current value
        var barcode = $('#barcode').val();

        // if there's no text, ignore the event
        if (!barcode)
        {
            return;
        }

        // clear the textbox
        $("#barcode").val("");

        // post the data using AJAX
        $.post('@Url.Action("scanned", "receiveScan")?barcode=' + barcode);
});

请注意，这假设设备实际上会立即粘贴整个数据。如果您发现该事件触发过于频繁，则需要对 change 事件实现一些限制。