web-dev-qa-db-fra.com

Scanner le code à barres dans une zone de texte spécifique

Je travaille sur des scanners de codes à barres. Le scanner de code à barres que j'utilise est de type plug-and-play et scanne automatiquement le code partout où vous placez le curseur. Mais ce que je veux, c'est que je puisse le scanner dans une zone de texte spécifique sur une page Web chaque fois que mon scanner lit un code 

Par exemple, si ma forme ressemble à ceci

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

ainsi, chaque fois que je scanne un code, il doit toujours apparaître dans la zone de texte txtitem, où que je me trouve. 

Quelqu'un peut-il me guider ou m'aider à trouver une solution ici ??

javascriptbarcodebarcode-scanner
10
Sriniwas

Certains scanners de codes à barres fonctionnent comme un autre périphérique d’entrée. Le formulaire ne peut pas faire la différence entre les informations saisies par un clavier et celles d'un scanner à moins que vous n'utilisiez une minuterie pour contrôler la rapidité de la saisie.

Certains scanners "collent" les valeurs dans le contrôle ciblé - d'autres envoient chaque trait de touche.

Le JSFiddle suivant est capable de détecter le moment où une entrée se produit lorsque des caractères sont envoyés individuellement sur un seul contrôle:

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

Vous pouvez l'adapter pour en faire un délégué pour l'ensemble du formulaire, supprimer l'entrée du contrôle dans lequel il a été entré et l'insérer dans le formulaire approprié.

Le test html pour le violon est le suivant:

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

Le code Javascript pour l'exemple de violon est:

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

Le code ci-dessus ne prend pas en charge le copier/coller, mais dans notre cas, il est peu probable que cela se produise de toute façon.

19
PhilM

Vous devez écouter l'événement "coller" à l'aide de jQuery

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

Voici un exemple: http://jsfiddle.net/T6VdS/

11
Igor S.

Le meilleur moyen est de mettre les données En code scanné. Presque tous les scanners prennent en charge une telle programmation. Beaucoup d'entre eux peuvent être programmés via des codes à barres de contrôle, qui sont imprimés manuellement.

J'utilise le Ctrl + Char pour le scanner de symboles, F9 données F10 pour le scanner Bluetooth Honeywel . Le scanner de guêpes ne prend pas en charge la combinaison de Ctrl + caractères. J'utilise donc le format [Data] pour Wasp.

Ensuite, j'attrape le premier symbole (dites [char) dans le programme et positionne le curseur dans la boîte de recherche. À la réception du dernier caractère (dans mon cas, char), envoyez le contenu de dans la routine de recherche.

0
Jeff_Alieffson

Je pense que le scanner est simplement vu comme un périphérique de saisie de texte, comme un clavier et une sortie de texte. À moins qu'il n'y ait un moyen d'identifier ce texte, la réponse sera probablement qu'il n'y a pas de solution facile.

Si le code que vous recevez est toujours dans le même formulaire et peut être identifié avec une expression régulière, vous pourrez peut-être le déplacer dans la case appropriée en mettant en mémoire tampon l'entrée (je m'attendrais à ce que le code numérisé vienne en une série de pressions sur les touches). qui sont bien plus rapides qu’un humain ne le ferait) et exécuter une regex dessus ...

0
Tom Elmore

Ajoutez un préfixe au texte généré par le scanneur (presque tout le scanneur vous laissera faire cela), puis, si une entrée commence par ce préfixe, vous savez qu'il s'agit du scanneur.

Pour capturer l'entrée avec jQuery vous pourriez faites quelque chose comme ceci:

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