Comment implémenter le scanner de code de surveillance jQuery pour interdire la saisie manuelle

Cet article partage principalement avec vous la surveillance des pistolets à balayage de code basée sur jQuery. Si vous souhaitez simplement surveiller et obtenir des informations sur la numérisation de codes-barres, vous pouvez les utiliser directement. Si vous avez davantage de jugement et de logique de traitement de codes-barres dont vous avez besoin pour vous développer, j'espère que cela pourra aider tout le monde.

1. Exigences fonctionnelles

Utilisez un lecteur de codes-barres pour numériser des codes-barres, surveiller et obtenir les données du scanner sur une page Web et interdire aux utilisateurs d'effectuer des opérations de saisie manuelle.

L'idée initiale est très simple, car le scanner de code simule la saisie au clavier Lorsqu'il est branché sur l'ordinateur via l'interface USB, il devient un périphérique d'entrée externe, qui peut être surveillé avec js. Mais comment déterminer si la saisie manuelle de l'utilisateur nécessite un certain traitement.

2. Principaux problèmes

1. Comment juger s'il faut saisir manuellement

2. Comment juger si une saisie de code-barres est terminée

3. Solution

La solution à la saisie manuelle consiste à comparer l'intervalle de temps entre l'appui sur une touche et son soulèvement, et l'intervalle de temps entre deux appuis sur une touche.

Étant donné que la vitesse de saisie du scanner de code est très rapide, l'intervalle de saisie du scanner de code que j'ai testé est d'environ 15 à 60 millisecondes et la saisie manuelle est comprise entre 100 et 200, à moins que je veuille délibérément interrompre à travers la limite. Cette valeur d'intervalle peut être contrôlée pour être très petite, à condition qu'elle ne dépasse pas la vitesse de numérisation du code.

Jugement de l'achèvement de la saisie : vous pouvez surveiller les modifications dans la zone de saisie. Si le nombre de chiffres atteint le nombre souhaité, soumettez-le au serveur pour traitement ; parce que le scanner que j'utilise Le pistolet à code peut être configuré pour ajouter un retour chariot à la fin si le code est scanné avec succès. Par conséquent, sur la base du code clé du retour chariot, on peut juger que la saisie est terminée, puis la valeur de la zone de saisie est obtenue, puis un traitement ultérieur (soumission au serveur, etc.) est effectué.

4. Code

Le jugement de l'intervalle de temps repose sur trois événements de jQuery : keydown, keypress, keyup ; c'est-à-dire que la touche commence à être enfoncée, a été enfoncée et apparaît. . , keydown signifie que la touche vient d'être enfoncée, mais que la valeur de la clé n'a pas encore été écrite dans la zone de texte. Keypress a été enfoncé et la valeur a été saisie dans la zone de texte, et keyup est apparu.

Ce qu'il faut juger, c'est l'intervalle de temps entre l'appui sur le bouton et sa levée, ainsi que l'intervalle de temps entre deux appuis sur une touche.

Le principal code de jugement de saisie manuelle.

var barcode = {
  listenerObj: null,
  oneKeyTime : '', /* 一次按键时间间隔 */
  twoKeyTime : '', /* 两次按键时间间隔 */
  keyDownTime: '', /* 键按下的时间  */
  barcodeLen : 8 , /* 条形码长度   */
  spanTime  : 70, /* 一次按键按下到释放的时间间隔 */
  on_key_down : function (){
    var that = this;
    this.listenerObj.keydown(function(e){
      if(e.which !== 13 && !(that.in_range(e.which))){
        $(that.listenerObj).val('');
        return ;
      }
      var d = new Date();
      var curTime = parseInt(d.getTime());
      if(that.keyDownTime !== '' && that.keyDownTime !== NaN){
        that.twoKeyTime = curTime - that.keyDownTime;
      }
      that.keyDownTime = curTime;
    });
  },
  on_key_up : function(){
    var that = this;
    this.listenerObj.keyup(function(e){
      var d = new Date();
      var keyUpTime = d.getTime();
      that.oneKeyTime = parseInt(keyUpTime) - parseInt(that.keyDownTime);
      var isHand = that.checkHandInput();
      if(isHand && that.in_range(e.which)){
        layer.msg('禁止手动输入');
        $(that.listenerObj).val("");
      }
    })
  },
  on_key_press : function(){
    var that = this;
    this.listenerObj.keypress(function(e){
      if(e.which == 13 && that.check_barcode()){
        that.createListEl();
      }
    });
  },
  checkHandInput : function(){
    if((this.oneKeyTime > this.spanTime) || this.twoKeyTime > this.spanTime){
      return true;
    }else{
      return false;
    }
  },
}

J'ai organisé le code et je l'ai mis sur Github.

L'invite dans mon code js utilise layer.js, donc si vous l'utilisez, suivez l'exemple dans index.html et introduisez le js pertinent :

<input id="barCode" value="" type="text" placeholder="stay focus" style="" name="">
$("#barCode").startListen({
  barcodeLen : 10,
  letter : true,
  number : true,
  show : function(code){
    layer.msg(code);
  }
});

Paramètres configurables ici : Y compris la longueur du code-barres, s'il contient des lettres anglaises et s'il contient des chiffres. Et une méthode de rappel show, cette méthode sera appelée lorsque le code est scanné avec succès et que le code-barres est légal, et renvoie la valeur du code-barres afin d'effectuer des opérations personnalisées, telles que le téléchargement sur le serveur.

Le code reste concentré sur la zone de saisie de la page, de sorte que les autres exigences de saisie sur la page ne peuvent pas être réalisées et l'appel à keepFocusInput peut être supprimé.

Recommandations associées :

Utilisez jQuery pour surveiller les changements de taille des éléments DOM

jquery pour surveiller les changements dans le contenu div Implémentation spécifique ideas_ jquery

Comment jQuery surveille les événements de zone de texte et les gère en conséquence_jquery

Ce qui précède est le contenu détaillé de. pour plus d'informations, suivez d'autres articles connexes sur le site Web de PHP en chinois!