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

Question

寻找您对处理以下问题的好方法的建议。

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

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

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

最大的两个问题是：

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

您对如何最好地处理有什么想法吗？

这是我的 HTML：

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

这是控制器动作：

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

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

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

我确实通过将控制器修改为：

   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 事件进行一些限制。