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

寻找一个处理以下问题的好方法的建议

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

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

在这一点上，我只想捕获数据并将其传递给控制器进行处理，清除字段并立即将控制返回到网页进行下一次扫描

最大的两个问题是：

速度–在他们进行实时扫描时，速度必须快

始终保持输入字段的焦点，以便 扫描它们不在屏幕上的其他字段中。它们将从输入字段开始，我只需要确保它们在每次扫描后自动返回到输入字段

你有没有想过如何最好地处理

这是我的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)
{
    var test = barcode;
    //code to process goes here
  return  RedirectToAction("receiveScan", "home");

}

但有人指出，重新发布整个页面不是一个好主意。 我会尽快尝试下面的一种解决方案

谢谢你的帮助，下面是有效的代码--

---

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

下面是一个如何做到这一点的示例（未经测试，可能有拼写错误）：

$（函数（）
{
$（“#条形码”）。关于（“更改”，功能（e）
{
//获取当前值
var barcode=$（'#barcode'）.val（）；
//如果没有文本，则忽略事件
如果（！条形码）
{
返回；
}
//清除文本框
$（“#条形码”）.val（“”）；
//使用AJAX发布数据
$.post（'@Url.Action（“已扫描”、“接收扫描”）？条形码='+条形码）；
});

---

请注意，这假设设备将立即粘贴整个数据。如果发现事件触发太频繁，则需要对

change

事件实施一些限制。

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

下面是一个如何做到这一点的示例（未经测试，可能有拼写错误）：

$（函数（）
{
$（“#条形码”）。关于（“更改”，功能（e）
{
//获取当前值
var barcode=$（'#barcode'）.val（）；
//如果没有文本，则忽略事件
如果（！条形码）
{
返回；
}
//清除文本框
$（“#条形码”）.val（“”）；
//使用AJAX发布数据
$.post（'@Url.Action（“已扫描”、“接收扫描”）？条形码='+条形码）；
});

---

请注意，这假设设备将立即粘贴整个数据。如果发现事件触发太频繁，则需要对

更改
事件实施一些限制。
据我所知，您需要的是应用程序客户端部分的帮助，而不是服务器端的帮助。c#side可以帮你纠正这个错误……我对收集数据后如何处理每次扫描有很好的把握。我的问题是我是一个winforms程序员，在一个Web应用程序中混日子。@Camiloterevento--我同意它很宽。我不知道我是否同意它太宽。从某人那里寻找大约3行代码，为我指出正确的方向注意，这不是一个完整的解决方案。你的评论实际上很有用。我不明白为什么1.和2.是问题！你的UI应该在每次收到新代码时对你的Web服务进行后台调用。在后台执行此操作应该始终关注你的输入，并且没有速度问题，因为你会在收到新代码后立即发送请求电子战数据到达。你甚至可以成批完成。我想我遇到的问题是我不希望整个页面都发布。我理解你的问题，你需要的是应用程序客户端部分的帮助，而不是服务器端的帮助。c端的任何东西都不能帮助你纠正这一错误……一旦数据被删除，我对如何处理每次扫描有很好的把握收集。我的问题是我是一个在网络应用程序中混日子的winforms程序员。@Camilterevito--我同意它太宽了。我不知道我是否同意它太宽了。从某人那里寻找大约3行代码来给我指出正确的方向，而不是一个完整的解决方案。你的评论实际上很有帮助。我不明白为什么1.和2.是问题！每次收到新代码时，您的UI都应该对您的Web服务进行后台调用。在后台执行此操作应始终将注意力集中在您的输入上，并且没有速度问题，因为新数据到达后，您将立即发送请求。您甚至可以成批执行此操作。我认为我遇到的问题是我不想要全部内容页面发布。我喜欢…我会测试它。谢谢你花时间输入它。我喜欢…我会测试它。谢谢你花时间输入它。
   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);
    });
})

<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);
});