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

小云云
リリース: 2018-01-22 10:49:04
オリジナル
3808 人が閲覧しました

この記事では主に、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 を使用して DOM 要素のサイズの変更を監視

jquery を使用して div コンテンツの変更を監視 具体的な実装のアイデア_jquery

テキスト ボックスのイベントを監視し、それに応じて処理する jQuery メソッド_jquery

以上が手動入力を禁止する jQuery モニタリング コード スキャナーを実装する方法の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。

関連ラベル:
ソース:php.cn
このウェブサイトの声明
この記事の内容はネチズンが自主的に寄稿したものであり、著作権は原著者に帰属します。このサイトは、それに相当する法的責任を負いません。盗作または侵害の疑いのあるコンテンツを見つけた場合は、admin@php.cn までご連絡ください。
最新の問題
人気のチュートリアル
詳細>
最新のダウンロード
詳細>
ウェブエフェクト
公式サイト
サイト素材
フロントエンドテンプレート