So implementieren Sie den jQuery-Überwachungscodescanner, um manuelle Eingaben zu verhindern

In diesem Artikel wird hauptsächlich die auf jQuery basierende Code-Scanning-Waffenüberwachung vorgestellt. Wenn Sie nur Informationen zum Barcode-Scannen überwachen und abrufen möchten, können Sie diese direkt verwenden. Wenn Sie über mehr Barcode-Beurteilung und Verarbeitungslogik verfügen, die Sie selbst erweitern müssen, kann dies hoffentlich allen helfen.

1. Funktionsanforderungen

Verwenden Sie einen Barcode-Scanner, um Barcodes zu scannen, die Daten vom Scanner auf einer Webseite zu überwachen und abzurufen und Benutzern die Durchführung manueller Eingabevorgänge zu verbieten.

Die Grundidee ist ganz einfach, denn der Codescanner simuliert Tastatureingaben. Wird er über die USB-Schnittstelle an den Computer angeschlossen, wird er zu einem externen Eingabegerät, das mit js überwacht werden kann. Aber wie kann man feststellen, ob die Benutzereingabe manuell eine gewisse Verarbeitung erfordert?

2. Hauptprobleme

1. So beurteilen Sie, ob eine Barcode-Eingabe abgeschlossen ist

3. Lösung

Die Lösung für die manuelle Eingabe besteht darin, das Zeitintervall vom Drücken einer Taste bis zum Anheben der Taste und das Zeitintervall zwischen zwei Tastendrücken zu vergleichen.

Da die Eingabegeschwindigkeit des Codescanners sehr hoch ist, beträgt das Eingabeintervall des von mir getesteten Codescanners etwa 15-60 Millisekunden und die manuelle Eingabe liegt zwischen 100-200, es sei denn, ich möchte absichtlich eine Pause einlegen durch die Grenze. Schnelle Eingabe. Dieser Intervallwert kann so gesteuert werden, dass er sehr klein ist, solange er die Geschwindigkeit des Scannens des Codes nicht überschreitet.

Beurteilung der Eingabevervollständigung: Sie können die Änderungen im Eingabefeld überwachen. Wenn die Anzahl der Ziffern die von uns gewünschte Zahl erreicht, senden Sie sie basierend auf dem Codescanner an den Server. weil der von mir verwendete Scanner Die Codepistole kann so konfiguriert werden, dass am Ende ein Wagenrücklauf angehängt wird, wenn der Code erfolgreich gescannt wurde. Daher kann anhand des Schlüsselcodes des Wagenrücklaufs beurteilt werden, dass die Eingabe beendet ist, und dann wird der Wert des Eingabefelds abgerufen und anschließend wird eine anschließende Verarbeitung (Übermittlung an den Server usw.) durchgeführt.

4. Code

Die Beurteilung des Zeitintervalls basiert auf drei Ereignissen von jQuery: Keydown, Keypress, Keyup; das heißt, die Taste wird gedrückt, wurde gedrückt und erscheint , keydown bedeutet, dass die Taste gerade gedrückt wurde, aber der Tastenwert noch nicht in das Textfeld geschrieben wurde. Keypress wurde gedrückt und der Wert wurde in das Textfeld eingegeben, und keyup wurde angezeigt.

Was beurteilt werden muss, ist das Zeitintervall vom Drücken der Taste bis zum Anheben der Taste und das Zeitintervall zwischen zwei Tastenbetätigungen.

Der wichtigste Beurteilungscode für die manuelle Eingabe.

Ich habe den Code organisiert und auf Github gestellt.

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;
    }
  },
}

Die Eingabeaufforderung in meinem JS-Code verwendet Layer.js. Wenn Sie es also verwenden, folgen Sie dem Beispiel in index.html und führen Sie das entsprechende JS ein:

Konfigurierbare Parameter hier: Einschließlich die Länge des Barcodes, ob er englische Buchstaben enthält und ob er Zahlen enthält. Und eine Show-Callback-Methode. Diese Methode wird aufgerufen, wenn der Code erfolgreich gescannt wurde und der Barcode legal ist, und gibt den Wert des Barcodes zurück, um benutzerdefinierte Vorgänge wie das Hochladen auf den Server durchzuführen.

<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);
  }
});

Der Code behält den Fokus auf dem Eingabefeld der Seite, sodass andere Eingabeanforderungen auf der Seite nicht erfüllt werden können und der Aufruf von keepFocusInput entfernt werden kann.

Verwandte Empfehlungen:

Verwenden Sie jQuery, um Änderungen der DOM-Elementgröße zu überwachen

jquery, um Änderungen im Div-Inhalt zu überwachen Spezifische Implementierung ideas_jquery

Wie jQuery Textfeldereignisse überwacht und sie entsprechend behandelt_jquery

Das obige ist der detaillierte Inhalt vonSo implementieren Sie den jQuery-Überwachungscodescanner, um manuelle Eingaben zu verhindern. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!