将条形码扫描到特定的文本框中 [英] Scan barcode into a specific textbox

问题描述

我正在研究条形码扫描仪。我使用的条形码扫描器是一种即插即用类型，无论您放置光标的位置，都会自动扫描代码。但我想要的是，每当我的扫描仪读取代码时，我是否可以将其扫描到网页上的特定文本框

I am working on bar-code scanners. The bar-code scanner that I am using is a plug-n-play type and scans the code automatically wherever you place the cursor. But what i want is that whether i can scan it to a specific text-box on a web page everytime my scanner reads a code

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

For eg, if my form looks like this

<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 文本框，无论我目前的焦点在哪里。

so everytime i scan a code it should always appear in the txtitem text-box no matter where my current focus is.

有人可以指导我或帮我找到解决方案吗？

Can anybody guide me or help me find a solution here??

推荐答案

某些条形码扫描仪的作用与其他输入设备相同。除非您使用计时器监控输入的速度，否则表单无法区分键盘输入的信息与扫描仪之间的区别。

Some Barcode Scanners act just like another input device. The form cannot tell the difference between information being entered by a keyboard vs. a scanner unless you use a timer to monitor how quickly it is entered.

某些扫描仪粘贴聚焦控件中的值 - 其他人发送每个单独的击键。

Some scanners "paste" the values in to the focused control - others send each individual key stroke.

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

The following JSFiddle is able to detect when input occurs when characters are sent individually on a single control:

http://jsfiddle.net/PhilM / Bf89R / 3 /

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

You could adapt this to make it a delegate for the whole form and remove the input from the control it was input into and put it into the correct form.

小提琴的测试html是这样的：

The test html for the fiddle is this:

<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>

样本小提琴的Javascript是：

The Javascript for the sample fiddle is:

/*
    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();

上面的代码不支持复制/粘贴，但在我们的情况下，这种情况不太可能发生。

The code above does not support copy/paste, but in our situation this is unlikely to happen anyway.

这篇关于将条形码扫描到特定的文本框中的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！