web-dev-qa-db-ja.com

バーコードをスキャンして特定のテキストボックスに入れる

私はバーコードスキャナーに取り組んでいます。私が使用しているバーコードスキャナーはプラグアンドプレイタイプで、カーソルを置くと自動的にコードをスキャンします。しかし、私が欲しいのは、スキャナーがコードを読み取るたびに、Webページの特定のテキストボックスにスキャンできるかどうかです。

たとえば、フォームが次のようになっている場合

<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テキストボックスに表示されます。

誰かが私を案内したり、ここで解決策を見つける手助けをしたりできますか？

javascriptbarcodebarcode-scanner
10
Sriniwas

一部のバーコードスキャナーは、別の入力デバイスのように動作します。タイマーを使用して入力速度を監視しない限り、フォームはキーボードとスキャナーで入力された情報の違いを区別できません。

一部のスキャナーは、フォーカスされたコントロールに値を「貼り付け」ます。その他のスキャナーは、個々のキーストロークを送信します。

次のJSFiddleは、単一のコントロールで文字が個別に送信されたときに入力が発生したことを検出できます。

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

これを適合させてフォーム全体のデリゲートにし、入力されたコントロールから入力を削除して、正しいフォームに入力することができます。

フィドルのテスト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>

サンプルフィドルの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();

上記のコードはコピー/貼り付けをサポートしていませんが、私たちの状況では、これはとにかく起こりそうにありません。

19
PhilM

JQueryを使用して「貼り付け」イベントをリッスンする必要があります

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

次に例を示します。 http://jsfiddle.net/T6VdS/

11
Igor S.

最善の方法は、スキャンしたコードにデータを入れることです。ほとんどすべてのスキャナーがこのようなプログラミングをサポートしています。それらの多くは、マニュアルで印刷されたコントロールバーコードを介してプログラムできます。

シンボルスキャナーにはCtrl + Char、ハニーウェルBluetoothスキャナーにはF9データF10を使用します。 Waspスキャナーは、Ctrl +文字の組み合わせをサポートしていません。そこで、Waspには[Data]形式を使用します。

次に、プログラムの最初の記号（たとえば[char]）を検索ボックス内のカーソルの位置にキャッチします。最後の文字（私の場合は] char）を受け取ったら、内容を検索ルーチンに送信します。

0
Jeff_Alieffson

スキャナーはキーボードのようなテキスト入力デバイスと見なされ、テキストを出力しているだけだと思います。そのテキストを特定する方法がない限り、答えはおそらく簡単な解決策はないと考えられます。

受け取っているコードが常に同じ形式であり、正規表現で識別できる場合、なんらかの方法で入力をバッファリングすることで、コードを正しいボックスに移動できる可能性があります（スキャンしたコードが一連のキーを押すと予想されます）それは人間が入力するよりもはるかに速いです）そしてそれの上で正規表現を実行しています...

0
Tom Elmore

スキャナーが出力するテキストに接頭辞を追加し（ほとんどすべてのスキャナーでこれを実行できます）、その接頭辞で入力が始まると、スキャナーがわかります。

Jqueryで入力をキャッチするには、次のようにしますmight：

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

});
0
nick