web-dev-qa-db-fra.com

Javascript: Comment lire au mieux un lecteur de codes-barres portable?

J'aimerais pouvoir scanner les codes-barres via un scanner portable et gérer les résultats avec Javascript.

Un lecteur de codes-barres fonctionne presque comme un clavier. Il sort les données numérisées/traduites (code à barres-> numéro) brutes (non?). En fait, je dois juste attraper la sortie et continuer. Mais comment?

Voici un pseudocode que j'aimerais faire fonctionner:

$(document).on("scanButtonDown", "document", function(e) {
    // get scanned content
    var scannedProductId = this.getScannedContent();

    // get product 
    var product = getProductById(scannedProductId);

    // add productname to list
    $("#product_list").append("<li>" + product.name + "</li>");
});
  • Des idées (frameworks, plugins, extraits)?
  • Une recommandation de scanner de code-barres (matériel)?

Merci d'avance!

J'ai trouvé this et this de bonnes questions mais j'aimerais obtenir plus d'informations sur la manipulation. Il ne suffit peut-être pas de concentrer une zone de texte dans mon cas.

javascriptjqueryajaxangularjsbarcode-scanner
22
Mr. B.

Votre pseudo-code ne fonctionnera pas, car vous n'avez pas accès au scanner pour intercepter des événements comme scanButtonDown. Votre seule option est un scanner HID, qui se comporte exactement comme un clavier. Pour différencier l'entrée du scanner de l'entrée du clavier, vous avez deux options: basée sur un minuteur ou sur un préfixe.

Basé sur une minuterie

Le scanner est susceptible d'entrer des caractères beaucoup plus rapidement qu'un utilisateur ne peut (raisonnablement) avec un clavier. Calculez la rapidité avec laquelle les frappes sont reçues et mettez en mémoire tampon une entrée rapide dans une variable à transmettre à votre fonction getProductsId. @Vitall a écrit une solution jQuery réutilisable pour capturer les entrées du scanner de codes-barres , il vous suffirait d'attraper l'événement onbarcodescanned.

Basé sur un préfixe

La plupart des scanners peuvent être configurés pour préfixer toutes les données numérisées. Vous pouvez utiliser le préfixe pour commencer à intercepter toutes les entrées et une fois que vous avez votre code-barres, vous arrêtez d'intercepter les entrées.

Divulgation complète: Je travaille en tant que consultant pour Socket Mobile, Inc. qui fabrique des scanners portables.

26
Enrico

Après beaucoup de recherches et de tests, ce qui a fonctionné le mieux pour moi a été de capturer les entrées d'un scanner de codes-barres sans concentrer une entrée de formulaire. Écoutez les événements keydown et textInput.

L'événement textInput agit comme un événement paste. Il contient alors des données de code-barres complètes. Dans mon cas, je recherche UPC codes-barres. La e.preventDefault() empêche les données du code-barres d'être insérées dans une entrée de formulaire:

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

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

Exemple d'écoute de l'événement keydown. Dans mon cas, je peux supposer que tant qu'une entrée de formulaire n'est pas focalisée, l'utilisateur scanne 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 vérifier la longueur de la chaîne pour déterminer une analyse, vous pouvez écouter le e.keyCode === 13 dans l'écouteur d'événement keydown.

Tous les scanners IR ne déclencheront pas l'événement textInput. Si votre appareil ne fonctionne pas, vous pouvez vérifier s'il émet quelque chose de similaire avec:

monitorEvents(document.body);

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

7
jfbloom22

OK, voici comment je l'ai fait. J'ai configuré 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) afin qu'il ne puisse pas être facilement entré via le clavier), et un ENTER, (n'hésitez pas à changez-le pour utiliser quelque chose comme Ctrl + 3 ou code ascii 003 après chaque lecture de code-barres, si vos données de code-barres peuvent contenir des entrées). Dans jQuery, je capture l'événement de pression de touche et recherche le préfixe. Ensuite, je capture tout dans une chaîne, puis je déclenche un événement personnalisé que mon application peut écouter. Étant donné que j'empêche l'événement d'appuyer sur une touche, l'utilisateur peut se trouver dans un champ de texte et scanner un code-barres, ce qui peut déclencher un événement sans affecter quoi que ce soit qu'il fasse.

De plus, chaque code-barres a un préfixe à 1 chiffre que nous utilisons pour identifier le type de code-barres scanné. Exemples:

  • E: Badge d'employé
  • S: Badge de superviseur
  • 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);

En raison de ce préfixe, je peux maintenant identifier le type de code-barres et voir s'il doit être géré 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);
    }
});
4
FrankerZ

Un lecteur de codes-barres fonctionne presque comme un clavier.

Cela dépend du modèle. Tous ceux que j'ai utilisés fonctionnent exactement comme un clavier (au moins en ce qui concerne l'ordinateur)

Il sort les données numérisées/traduites (code à barres-> numéro) brutes (non?).

Il génère des codes clés.

$(document).on("scanButtonDown"

Vous voulez probablement keypress, pas scanButtonDown.

Regardez l'objet d'événement pour déterminer la "touche" qui a été enfoncée.

Pour déterminer quand le code entier a été analysé, vous pouvez obtenir une clé de "fin de données" (éventuellement un espace ou un retour) ou vous devrez simplement compter le nombre de caractères entrés.

2
Quentin
var txt = "";
function selectBarcode() {
    if (txt != $("#focus").val()) {
        setTimeout('use_rfid()', 1000);
        txt = $("#focus").val();
    }
    $("#focus").select();
    setTimeout('selectBarcode()', 1000);
}

$(document).ready(function () {
    setTimeout(selectBarcode(),1000);       
});
<script src="//ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script> 

<input type="text" name="tag" id="focus" placeholder="Use handheld RFID scanner">
1
boateng

Je viens de commencer à travailler sur un plugin qui gère le scan des codes-barres et le scan des cartes de crédit (construit sur jQuery):

https://github.com/ericuldall/jquery-pos

Implémentation simple:

$(function(){
    $(document).pos();
    $(document).on('scan.pos.barcode', function(event){
        var barcode = event.code;
        //handle your code here....
    });
});

Jusqu'à présent, ce plugin n'est testé qu'avec un type de scanner et des codes ne contenant que des chiffres, mais si vous avez d'autres exigences qui ne fonctionnent pas avec lui, je serais heureux de l'adapter à vos besoins. Veuillez consulter la page github et lui donner un tourbillon. Les contributions sont encouragées.

E

1
Eric Uldall

Je suis un peu en retard mais j'ai fait ce contournement basé sur quelques réponses ici.

let code = "";
let reading = false;
document.addEventListener('keypress', e=>{
  //usually scanners throw an 'Enter' key at the end of read
   if (e.keyCode===13){
          if(code.length>10){
            console.log(code);
            /// code ready to use                
            code="";
         }
    }else{
         code+=e.key;//while this is not an 'enter' it stores the every key            
    }
   //run a timeout of 200ms at the first read and clear everything
    if(!reading){
         reading=true;
         setTimeout(()=>{
          code="";
          reading=false;
      }, 200);} //200 works fine for me but you can adjust it
1
Hanz Herdel