Javascript 将条形码扫描到特定的文本框中

我在做条形码扫描器。我使用的条形码扫描器是一种即插即用型，无论你把光标放在哪里，它都会自动扫描代码。但我想知道的是，每次我的扫描器读取代码时，我是否能将其扫描到网页上的特定文本框

例如，如果我的表单看起来像这样

<input type="text" name="txtItem" id="txtItem" class="m-wrap w-120" tabindex="6">

<input type="text" name="itemId" id="itemId" class="m-wrap w-120" tabindex="6">

<input type="text" name="itemName" id="itemName" class="m-wrap w-120" tabindex="6">

<input type="text" name="itemQty" id="itemQty" class="m-wrap w-120" tabindex="6">

因此，每次扫描代码时，无论当前焦点在哪里，它都应始终显示在

txtitem

文本框中

有人能在这里指导我或帮助我找到解决方案吗？

您需要使用jQuery收听“粘贴”事件

$("input").on("paste",function(e){
    $("#txtItem").focus();
});

以下是一个例子：

---

我认为扫描仪只是被看作一个文本输入设备，就像一个键盘，可以输出文本。除非有一种方法来识别该文本，否则答案很可能是没有一个简单的解决方案

---

如果您接收的代码总是以相同的形式出现，并且可以用正则表达式进行识别，那么您可以通过某种方式缓冲输入，将其移动到正确的框中（我希望扫描的代码以一系列按键的形式出现，远远快于人类的输入速度）并在其上运行正则表达式…

为扫描器输出的文本添加前缀（几乎所有扫描器都允许您这样做），然后当任何输入以该前缀开始时，您就知道它是扫描器

要使用jquery捕获输入，可以执行以下操作：

//presuming the scanner acts like a keyboard
$(document).keypress(function (e) { 

    //do something to match the 'key presses' 

    //focus to the input and put the rest of the string in there

}); 

---

有些条形码扫描器就像另一个输入设备一样工作。表单无法区分键盘输入的信息与扫描仪输入的信息之间的区别，除非您使用计时器监控输入的速度

一些扫描器将值“粘贴”到聚焦控件中，其他扫描器则发送每个单独的按键笔划

当在单个控件上单独发送字符时，以下JSFIDLE能够检测何时发生输入：

您可以对其进行调整，使其成为整个表单的委托，并从其输入的控件中删除输入，并将其放入正确的表单中

小提琴的测试html如下所示：

<form>
    <input id="scanInput" />
    <button id="reset">Reset</button>
</form>
<br/>
<div>
    <h2>Event Information</h2>
    Start: <span id="startTime"></span> 
    <br/>First Key: <span id="firstKey"></span> 
    <br/>Last Ley: <span id="lastKey"></span> 
    <br/>End: <span id="endTime"></span> 
    <br/>Elapsed: <span id="totalTime"></span>
</div>
<div>
    <h2>Results</h2>
    <div id="resultsList"></div>
</div>

重置


事件信息
开始：

第一个键：

最后一天：

结束：


结果

示例fiddle的Javascript是：

/*
    This code will determine when a code has been either entered manually or
    entered using a scanner.
    It assumes that a code has finished being entered when one of the following
    events occurs:
        • The enter key (keycode 13) is input
        • The input has a minumum length of text and loses focus
        • Input stops after being entered very fast (assumed to be a scanner)
*/

var inputStart, inputStop, firstKey, lastKey, timing, userFinishedEntering;
var minChars = 3;

// handle a key value being entered by either keyboard or scanner
$("#scanInput").keypress(function (e) {
    // restart the timer
    if (timing) {
        clearTimeout(timing);
    }

    // handle the key event
    if (e.which == 13) {
        // Enter key was entered

        // don't submit the form
        e.preventDefault();

        // has the user finished entering manually?
        if ($("#scanInput").val().length >= minChars){
            userFinishedEntering = true; // incase the user pressed the enter key
            inputComplete();
        }
    }
    else {
        // some other key value was entered

        // could be the last character
        inputStop = performance.now();
        lastKey = e.which;

        // don't assume it's finished just yet
        userFinishedEntering = false;

        // is this the first character?
        if (!inputStart) {
            firstKey = e.which;
            inputStart = inputStop;

            // watch for a loss of focus
            $("body").on("blur", "#scanInput", inputBlur);
        }

        // start the timer again
        timing = setTimeout(inputTimeoutHandler, 500);
    }
});

// Assume that a loss of focus means the value has finished being entered
function inputBlur(){
    clearTimeout(timing);
    if ($("#scanInput").val().length >= minChars){
        userFinishedEntering = true;
        inputComplete();
    }
};


// reset the page
$("#reset").click(function (e) {
    e.preventDefault();
    resetValues();
});

function resetValues() {
    // clear the variables
    inputStart = null;
    inputStop = null;
    firstKey = null;
    lastKey = null;
    // clear the results
    inputComplete();
}

// Assume that it is from the scanner if it was entered really fast
function isScannerInput() {
    return (((inputStop - inputStart) / $("#scanInput").val().length) < 15);
}

// Determine if the user is just typing slowly
function isUserFinishedEntering(){
    return !isScannerInput() && userFinishedEntering;
}

function inputTimeoutHandler(){
    // stop listening for a timer event
    clearTimeout(timing);
    // if the value is being entered manually and hasn't finished being entered
    if (!isUserFinishedEntering() || $("#scanInput").val().length < 3) {
        // keep waiting for input
        return;
    }
    else{
        reportValues();
    }
}

// here we decide what to do now that we know a value has been completely entered
function inputComplete(){
    // stop listening for the input to lose focus
    $("body").off("blur", "#scanInput", inputBlur);
    // report the results
    reportValues();
}

function reportValues() {
    // update the metrics
    $("#startTime").text(inputStart == null ? "" : inputStart);
    $("#firstKey").text(firstKey == null ? "" : firstKey);
    $("#endTime").text(inputStop == null ? "" : inputStop);
    $("#lastKey").text(lastKey == null ? "" : lastKey);
    $("#totalTime").text(inputStart == null ? "" : (inputStop - inputStart) + " milliseconds");
    if (!inputStart) {
        // clear the results
        $("#resultsList").html("");
        $("#scanInput").focus().select();
    } else {
        // prepend another result item
        var inputMethod = isScannerInput() ? "Scanner" : "Keyboard";
        $("#resultsList").prepend("<div class='resultItem " + inputMethod + "'>" +
            "<span>Value: " + $("#scanInput").val() + "<br/>" +
            "<span>ms/char: " + ((inputStop - inputStart) / $("#scanInput").val().length) + "</span></br>" +
            "<span>InputMethod: <strong>" + inputMethod + "</strong></span></br>" +
            "</span></div></br>");
        $("#scanInput").focus().select();
        inputStart = null;
    }
}

$("#scanInput").focus();

/*
此代码将确定何时手动或手动输入代码
使用扫描仪输入。
它假定在下列情况之一时，代码已输入完毕
发生的事件：
•输入输入键（键代码13）
•输入的文本长度最小，失去焦点
•输入速度非常快（假设为扫描仪）后停止输入
*/
var inputStart、inputStop、firstKey、lastKey、timing、userFinishedEntering；
var-minChars=3；
//处理键盘或扫描仪输入的键值
$（“#扫描输入”）。按键（功能（e）{
//重新启动计时器
如果（定时）{
清除超时（定时）；
}
//处理关键事件
如果（e.which==13）{
//输入了回车键
//不要提交表格
e、 预防默认值（）；
//用户是否已完成手动输入？
if（$（“#scanInput”）.val（）.length>=minChars）{
userFinishedEntering=true；//如果用户按了enter键
inputComplete（）；
}
}
否则{
//输入了其他一些键值
//可能是最后一个角色
inputStop=performance.now（）；
lastKey=e.which；
//不要以为它刚刚完成
userFinishedEntering=false；
//这是第一个角色吗？
如果（！inputStart）{
firstKey=e.which；
输入开始=输入停止；
//注意注意力不集中
$（“正文”）。在（“模糊”、“扫描输入”、“输入模糊”）；
}
//再次启动计时器
计时=设置超时（inputTimeoutHandler，500）；
}
});
//假设失去焦点意味着该值已输入完毕
函数inputBlur（）{
清除超时（定时）；
if（$（“#scanInput”）.val（）.length>=minChars）{
userFinishedEntering=true；
inputComplete（）；
}
};
//重新设置页面
$（“#重置”）。单击（功能（e）{
e、 预防默认值（）；
重置值（）；
});
函数resetValues（）{
//清除变量
inputStart=null；
inputStop=null；
firstKey=null；
lastKey=null；
//清除结果
inputComplete（）；
}
//如果输入速度非常快，则假定它来自扫描仪
函数isScannerInput（）{
返回（（（inputStop-inputStart）/$（“#scanInput”）.val（）.length）<15）；
}
//确定用户是否只是在缓慢地键入
函数isUserFinishedEntering（）{
return！isScannerInput（）&&userFinishedEntering；
}
函数inputTimeoutHandler（）{
//停止侦听计时器事件
清除超时（定时）；
//如果该值是手动输入的，但尚未完成输入
如果（！isUserFinishedEntering（）| |$（“#scanInput”）.val（）.length<3）{
//继续等待输入
返回；
}
否则{
reportValues（）；
}
}
//在这里，我们决定现在要做什么，因为我们知道已经完全输入了一个值
函数inputComplete（）{
//停止收听，以使输入失去焦点
$（“body”）.off（“模糊”，“扫描输入”，输入模糊）；
//报告结果
reportValues（）；
}
函数reportValues（）{
//更新指标
$（“#开始时间”）.text（inputStart==null？”：inputStart）；
$（“#firstKey”）.text（firstKey==null？”：firstKey）；
$（“#endTime”）.text（inputStop==null？”：inputStop）；
$（“#lastKey”）.text（lastKey==null？”：lastKey）；
$（“#totalTime”）.text（inputStart==null？”：（inputStop-inputStart）+“毫秒”）；
如果（！inputStart）{
//清除结果
$（“#结果列表”）.html（“”）；
$（“#扫描输入”）.focus（）.select（）；
}否则{
//预加anot