js を使用して USB スキャナー データを取得する方法

js を使用して USB スキャナー データを取得する方法

この記事では、USBバーコードスキャナデータを取得するjsの具体的なプロセスを参考までに紹介します。具体的な内容は次のとおりです。

さっそく、コードを見てみましょう。この方法を使うと、最初の文字が抜けたり、文字列が文字化けしたりするなどの問題が回避できます。とても便利です。記録しておきましょう。

中間のAjaxはログイン機能を直接呼び出して自動ログインを実現できる

注: 入力ボックスにはフォーカスが必要です。これは必須です。次に、キャリッジ リターンによって手動ログインがトリガーされないようにするには、onkeypress="if(event.keyCode==13) return false;" の操作を追加する必要があります。キャリッジ リターンが押されると、フォーカスを手動で切り替えるか focus() メソッドを呼び出しない限り、入力ボックスのフォーカスは失われません。

<div class="フォームグループ">
 <label for="inputUsernameEmail">アカウント</label>
 <input type="text" placeholder="アカウントを入力してください" name="ユーザー名" id="ログイン名" class="form-control" autofocus onkeypress="if(event.keyCode==13) return false;">
</div>

コード:

<スクリプト>
  ウィンドウ.onload = (e) => {
   this.start = 新しい Date().getTime()
   コード = '' とします
   lastTime、nextTime を設定します
   最後のコード、次のコード
   それを = これとする
   window.document.onkeypress = 関数 (e) {
    if (window.event) { // IE
     次のコード = e.keyCode
    } else if (e.which) { // Netscape/Firefox/Opera
     次のコード = e.which
    }
    コンソールログ('次のコード', 次のコード)
    if (e.which === 13 || window.event === 13) {
     var デバイスコード = コード;
     console.log(コード)
     console.log('コードのスキャンが完了しました')
     コンソール.timeEnd()
     コード = ''
     最終コード = ''
     最終時刻 = ''
     $.ajax({
      キャッシュ: true、
      タイプ: "POST",
      url: ルートパス + "/admin/login",
      データ: {コード: デバイスコード、タイプ: 1},
      非同期: false、
      エラー: 関数 (リクエスト) {
       $("#ログイン名").val("");
       $.modal.alertError("システムエラー");
      },
      成功: 関数 (データ) {
       $("#ログイン名").val("");
       (データコード == 200) の場合 {
        location.href = rootPath + '/admin/index';
       } それ以外 {
        $.modal.alertError(データ.msg);
       }
      }
     });
    }
    nextTime = 新しいDate().getTime()
    最後の時間 && 最後のコードの場合
     console.log('開始するにはコードをスキャンしてください...')
     コード += e.key
    }
    if (lastCode && lastTime && nextTime - lastTime > 500) { // コードをスキャンする前にキー押下イベントが発生した場合、最初の単語が欠落しないようにします console.log('最初の単語が欠落しないようにします...')
     コード = e.key
    } それ以外の場合 (lastCode && lastTime) {
     console.log('コードをスキャンしています...')
     コード += e.key
    }
    最後のコード = 次のコード
    前回 = 次回
   }
  }
</スクリプト>

以上がこの記事の全内容です。皆様の勉強のお役に立てれば幸いです。また、123WORDPRESS.COM を応援していただければ幸いです。

以下もご興味があるかもしれません:
  • スキャナでスキャンしたバーコードをJavaScriptで取得するアイデアの詳細なコード説明
  • バーコードスキャナの入力データを取得するjsメソッド
  • JSはバーコードスキャナでQRコードをスキャンする機能を実現します

<<:  Tomcat 例外の解決方法 (リクエスト ターゲットに無効な文字が見つかりました。有効な文字は RFC 7230 および RFC 3986 で定義されています)

>>:  MySQL の CPU 負荷が高い問題のトラブルシューティング

推薦する

Centos7 システムでの python2 と python3 の共存

最初のステップは、Python のバージョン番号とインストール パスを確認することです。 上記のビュ...

MySQL EXPLAIN出力列の詳細な説明

1. はじめにEXPLAIN ステートメントは、MySQL がステートメントを実行する方法に関する情...

JS の new 関数の詳細な説明

目次1. 例2. 兵士100人を作成する3. 質問4. 改善点5. エレガント? 6. JSの父から...

Docker Compose の実践とまとめ

Docker Compose は、Docker コンテナ クラスターのオーケストレーションを実現しま...

カスタム変数を使用した MySQL クエリの最適化

目次並べ替えクエリの最適化変更されたばかりのデータ行を繰り返し取得しないようにする遅延ロードされた結...

Node.js の fs モジュールと Path モジュールのメソッドの詳細な説明

概要:ファイルシステム モジュールは、標準の POSIX ファイル I/O 操作セットをラップしたシ...

CSS メニューボタンアニメーション

ドロップダウンメニューを書くには、ボタンをクリックします。メニューの入り口はアイコンボタンをクリック...

Apache ab同時負荷ストレステストの実装方法

腹筋コマンドの原則Apache の ab コマンドは、マルチスレッドの同時リクエストをシミュレートし...

Python Django アプリケーションを Docker 化する方法

Docker は、開発者やシステム管理者がアプリケーションを軽量コンテナとして構築およびパッケージ化...

Vue+tsx のスロット使用の問題が置き換えられない

目次序文問題を見つける解決する追記序文最近、 UIコンポーネントを作成する予定で、 vue 2.xと...

Jenkins Docker 静的エージェント ノードのビルド プロセス

静的ノードはマシン上に固定されており、いくつかの固定コマンドを通じて起動されます。動的ノードには複数...

RedisとMemcacheの比較と選び方

最近 redis を使っていて、とても便利だと感じているのですが、インメモリ データベースを選択する...

Vueはvueメタ情報を使用して各ページのタイトルとメタ情報を設定します。

title: vue は vue-meta-info を使用して各ページのタイトルとメタ情報を設定...

Vue ルーター vue-router 詳細説明ガイド

中国語ドキュメント: https://router.vuejs.org/zh/ Vue Router...