Javascript: Comment lire un scanner de code à barres tenu dans la main le mieux?

Après beaucoup de recherches et de tests, ce qui a fonctionné le mieux pour moi était de capturer l'entrée à partir d'un scanner de codes barres sans mise au point d'un formulaire de saisie. Écouter la keydown et textInput événements.

La textInput événement agit comme un paste événement. Il dispose alors d'un ensemble de données de code à barres. Dans mon cas, je suis à la recherche pour les codes-barres UPC. Le e.preventDefault() empêche les données de code à barres d'être inséré dans un formulaire de saisie:

document.addEventListener('textInput', function (e){
    if(e.data.length >= 6){
        console.log('IR scan textInput', e.data);
        e.preventDefault();
    }
});

J'ai testé sur Android 4.4 et 7.0 avec un CipherLab IR scanner.

Exemple pour écouter de la keydown événement. Dans mon cas, je suis en mesure de supposer que tant que le formulaire n'est pas ciblé, l'utilisateur est en scannant un code-barres.

    let UPC = '';
    document.addEventListener("keydown", function(e) {
        const textInput = e.key || String.fromCharCode(e.keyCode);
        const targetName = e.target.localName;
        let newUPC = '';
        if (textInput && textInput.length === 1 && targetName !== 'input'){
            newUPC = UPC+textInput;

          if (newUPC.length >= 6) {
            console.log('barcode scanned:  ', newUPC);
          } 
       }
    }

Bien sûr, plutôt que de la vérification de la longueur de la chaîne pour déterminer un scan, vous pouvez écouter de la e.keyCode === 13 dans le keydown écouteur d'événement.

Pas tous les IR scanners de déclencher la textInput événement. Si votre appareil n'est pas, alors vous pouvez vérifier pour voir si elle dégage quelque chose de similaire avec:

monitorEvents(document.body);

Trouvé cette surveillance astuce ici: Comment vous connectez-vous tous les événements déclenchés par un élément en jQuery?

OK, donc voici comment j'ai fait. - Je configurer le scanner, pour ajouter un préfixe (Dans mon cas, j'ai utilisé Ctrl+2 ou le code ascii 002 (un code de contrôle) de sorte qu'il ne pouvait pas facilement être entré à l'aide du clavier), et une ENTRÉE, (n'hésitez pas à la changer pour utiliser quelque chose comme Ctrl+3 ou code ascii 003 après chaque code-barres scanner, si vos données de code à barres peut contenir entre). En jQuery, j'ai fait une capture de l'événement keypress, et regarder pour le préfixe. Je puis, de capture, le tout dans une chaîne de caractères, et puis le feu d'un événement personnalisé, que mon application puisse écouter. Parce que je suis la prévention de l'événement keypress, l'utilisateur peut être dans un champ de texte, et de scanner un code-barres, ce qui peut déclencher un événement sans affecter tout ce qu'ils font.

En outre, chaque code-barres a 1 chiffres préfixe que nous utilisons pour identifier le type de code-barres scanné. Exemples:

• E: Badge De L'Employé
• S: Superviseur Insigne
• I: Numéro D'Article

let barcodeRead = '';
let readingBarcode = false;

let handleKeyPress = (e) => {
    if (e.keyCode === 2) {
        //Start of barcode
        readingBarcode = true;
        e.preventDefault();
        return;
    }

    if (readingBarcode) {
        e.preventDefault();

        if (e.keyCode === 13) { //Enter
            readingBarcode = false;
            const evt = $.Event('barcodeScan');
            evt.state = {
                type: barcodeRead.substr(0, 1),
                code: barcodeRead.substr(1),
            };
            $(window).trigger(evt);
            barcodeRead = '';
            return;
        }

        //Append the next key to the end of the list
        barcodeRead += e.key;
    }
}

$(window).bind('keypress', handleKeyPress);

À cause de ce préfixe, je peux maintenant identifier le type de code-barres, et de voir si elle doit être traitée sur cette page. Exemple:

$(window).bind('barcodeScan', (e) => {
    if (e.state.type !== 'E') {
        alert('Please scan your employee badge only!');
    } else {
        $('#employee-badge').val(e.state.code);
    }
});

Ici est une simple copie + paster pour toute personne intéressée.

Ce ne cesse de se concentrer sur un (hackily cachée) zone de texte et vérifie dans une boucle. Peu de potentiel pour un remplissage partiel de l'erreur, mais devrait fonctionner très bien avec le genre de scanners qui agissent comme des claviers.

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>Barcode Scanner</title>
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.3.6/css/bootstrap.min.css" rel="stylesheet">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script>
<!--[if lt IE 9]>
<script src="https://cdnjs.cloudflare.com/ajax/libs/html5shiv/3.7.3/html5shiv.min.js"></script>
<script src="https://oss.maxcdn.com/respond/1.4.2/respond.min.js"></script>
<![endif]-->
<script>
//setup before functions
var typingTimer;                //timer identifier
var doneTypingInterval = 1000;  //time in ms, 1 second for example
//we have the info we need.
var barcodeEntered = function() {
var text = $("#myInput").val();
alert('We will now process barcode:' + text);
//Set it up for another read
$("#myInput").val('');
$("#myInput").focus();
setTimeout(timerEvent, doneTypingInterval);
}
//Check and see if there's anything in the textbox (there might not be a keydown event)
var timerEvent =function(){
var text = $("#myInput").val();
if(text.length > 5){
barcodeEntered();
} else{
setTimeout(timerEvent, doneTypingInterval);
$("#myInput").focus();
}
};
$(function(){
setTimeout(timerEvent, doneTypingInterval);
$("#myInput").focus();
});
</script>
</head>
<body>
<div class="container">
<h1>Please scan your barcode</h1>
<!-- This is hidden from the screen. -->
<input id="myInput" type="text" style="width: 100px; position: absolute; left: -100px;" />
</div>
<script src="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.3.6/js/bootstrap.min.js"></script>
</body>
</html>