【js】キーボードの入力を特定のテキストボックスに集約させる

Webアプリケーションを作っていて、テキストエリアを介さずに入力を送信したい場合があります。
例えば、バーコードリーダーのような外部デバイスの入力を受け付けてそのまま送信をしたい時などです。

今回は、テキスト入力を特定のテキストボックスに入力させる方法について触れます。

外部デバイスの文字入力をする仕組み

簡単に触れます。
今回は一般的なUSBタイプのバーコードリーダーを題材にします。

ビジコムバーコードリーダー二アレンジCCD USB 白液晶読取対応 BC-BR900L-W

発売日: 2012/06/22
メディア: オフィス用品

バーコードリーダーはヒューマンインターフェイスデバイス(HID)です。
OSが用意しているデバイス用のドライバーで入出力を制御しています。

docs.microsoft.com

一般的なバーコードリーダのは、読み取ったバーコードをキーボードのキー入力として置き換えてます。
置き換えたキーは、キーボードで入力した事にします（シミュレートします）。
バーコードにもよりますが、キーボードを入力するとEnter(機種や設定によってはTab)を入力します。

そのため、keypress やkeydown イベントで入力を拾う事が出来ます。

developer.mozilla.org developer.mozilla.org

実装例

次のようにテキストボックスが１つしかないページがあったとします。
テキストボックスからフォーカスを外した状態で、キーボード入力をするとテキストボックスにフォーカスが移り入力されます。

Enterを押す事で入力された内容をまとめて処理する事が出来ます。

See the Pen キータイプ強制フォーカス by shibainu (@websandbag) on CodePen.

コード

// targetTextというIDが付与されたテキストボックスに文字を指定します。
const targetText = document.getElementById("targetText");

// キーボード入力を、keypressで取得します。
document.addEventListener('keypress', (e) => {
  var keyName = event.key;
  
  // 該当のテキストボックスをフォーカスして入力状態にする
  targetText.focus()

  // Enterキーを押されたら入力した内容を送信（予定）。
  // 入力エリアを初期化します。
  if(event.key === 'Enter') {
    alert(`送信します。番号:${targetText.value}`)
    targetText.value = "";
  }
})

以上です。
テキストボックスが１つしかないようなシングルページアプリケーションに限定されますが、テキストボックスにフォーカスする事なく、テキストを送信する事が出来ました。