ホームページ > 記事 > ウェブフロントエンド > 手動入力を禁止する jQuery モニタリングコードスキャナーを実装する方法

手動入力を禁止する jQuery モニタリングコードスキャナーを実装する方法

小云云オリジナル: 2018-01-22 10:49:043750ブラウズ

この記事では主に、jQuery に基づくコードスキャンガンの監視について説明します。バーコードスキャン情報を監視して取得したいだけの場合は、それを直接使用できますが、独自に拡張する必要があるバーコード判定と処理ロジックがある場合は、それが皆様のお役に立てれば幸いです。

1. 機能要件

バーコードスキャナーを使用してバーコードをスキャンし、Web ページ上でスキャナーからデータを監視および取得し、ユーザーによる手動入力操作を禁止します。

最初のアイデアは非常に単純です。コードスキャナーは、USB インターフェイスを使用してコンピューターに接続すると、外部入力デバイスとなり、js で監視できるからです。しかし、ユーザーの手動入力に何らかの処理が必要かどうかを判断する方法は次のとおりです。

2. 主な問題点

1. 手入力するかどうかの判断方法

2. バーコード入力が完了したかどうかの判断方法

3. 解決策

手動入力の解決策は、キーが入力された時間を比較することです。押されてから解除されるまでの時間間隔、および 2 つのキーを押す間の時間間隔。

コードスキャナーの入力速度は非常に速いため、テストしたコードスキャナーの入力間隔は約 15 ～ 60 ミリ秒で、意図的に制限を突破したくない場合を除き、手動入力は 100 ～ 200 ミリ秒です。素早く入力します。この間隔の値は、コードのスキャン速度を超えない限り、非常に小さく制御できます。

入力完了の判断: 入力ボックスの変更を監視できます。桁数が必要な数値に達したら、コードスキャナーに基づいて処理されます。コードが正常にスキャンされると、最後に復帰が追加されます。したがって、改行のキーコードにより入力が終了したと判断し、入力ボックスの値を取得し、その後の処理（サーバーへの送信など）を行います。

4. コード

の時間間隔は、jQuery の 3 つのイベント (keydown、keypress、keyup) に依存します。つまり、Keydown はキーが押され始めたこと、押されたこと、およびポップアップしたことを意味します。を押したばかりですが、キーの値がテキストボックスに書き込まれていません。キーを押して値がテキストボックスに入力され、キーアップが表示されます。

判断する必要があるのは、ボタンを押してから離すまでの時間間隔と、2回のキーダウンの時間間隔です。

メインの手動入力判定コードです。

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

コードを整理してGithubに置きました。

私のjsコードのプロンプトはlayer.jsを使用しているので、それを使用する場合は、index.htmlの例に従って、関連するjsを導入してください:

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

ここで設定可能なパラメータ: バーコードの長さ、英語が含まれているかどうかを含む文字、数字が含まれているかどうか。また、ショーコールバックメソッド。このメソッドは、コードが正常にスキャンされ、バーコードが正当である場合に呼び出され、サーバーへのアップロードなどのカスタマイズされた操作を実行するためにバーコードの値を返します。

このコードはページの入力ボックスにフォーカスを保持しているため、ページ上の他の入力要件を実現できず、keepFocusInput の呼び出しを削除できます。

手動入力を禁止する jQuery モニタリング コード スキャナーを実装する方法

関連記事

手動入力を禁止する jQuery モニタリングコードスキャナーを実装する方法