Bluetoothバーコードスキャナ使用の際のブラウザ入力フィールドの制御



PC・スマートフォンに関わらず、ブラウザの特定の入力フィールドにBluetooth接続(PCの場合はUSB接続でもよい)のバーコードスキャナでバーコードを入力したい。やりたいことはこうである。

  • あるページが表示されたら、バーコード入力領域にフォーカスを当てる。
  • スキャナからバーコード文字列がきたら、それをシステムに入力し商品データ等を拾う。
  • ユーザが数量等を手入力する。終了したら最初に戻る。

しかしこれには数々の問題がある。

iPhoneではフォーカスが移らない

iPhoneの特殊な仕様により、プログラム側からフォーカスの指示を出しても効果が無い。入力フィールドをタップしないと移らないのである。つまり、「あるページを開いたら、特定の入力フィールドにフォーカスし、すぐにユーザ入力を受け付ける」ということができないのである。

これについては、iPhoneのSafariで入力フィールドにフォーカスが移らないに書いた。現実的な解決策としては、Safariを使わず、Firefox等を使うことかと思われる(未確認)。

ソフトキーボードを表示させる

スマートフォンのデフォルトでは、Bluetoothスキャナなりを接続するとソフトキーボードは表示されなくなる。スキャナもキーボードと認識されているので、「キーボードが接続されたのだからソフトキーボードは不要だろう」というわけだ。

しかし、あくまでもスキャナであり、キーボードではないので、ほとんど何も入力できなくなってしまう。これでは困るので、「ソフトキーボードを表示する」オプションを選択することもできる。

例えば、Androidの場合には、設定>言語と入力>現在のキーボードをクリックすると、スキャナを接続していない時は、以下の表示であるが、

スキャナを接続すると、以下のようなスイッチが現れる。

このスイッチをONにすれば、スキャナ接続中でもソフトキーボードが現れる

ソフトキーボードを表示させない

しかし、逆にバーコード入力中等にはソフトキーボードを表示させたくない。

この方策としては入力フィールドフォーカス時に一時的に入力不可状態にするというものがある。
–>後述する

日本語入力モード中のEnterキーの問題

PCでもスマフォでも同じだが、日本語入力モードになっていると入力した文字列が変換候補となってしまい、その次にEnterがやってきてもEnterとみなされず、変換確定として消費されてしまう。

これを避けるには、連続した一連の文字列が入力された後で、いくばくかの休止があった場合(数十ミリ~数百ミリ秒)には自動的にEnterされたものとして処理してしまうことが考えられる。

しかし、JavaScript(当方ではGWTを使用しているが)では、KeyPressやChangeイベントは使いものにならない。jQueryでテキストボックスの変更を監視/検知するに記述があるが、KeyUpイベントを監視することでしか漢字変換入力時のイベントは捕捉できないのである。

そして、KeyUpイベントでEnterキーがやってきたときは普通に入力し、Enterキーがやってこなくとも何らかの文字が入力されており一定時間経過した場合は自動でEnterとみなすことにする。

しかし、ここにも落とし穴があるのである。ブラウザによって挙動が異なるのだ。

JavaScript における 日本語入力確定 (Enter) イベントを見てみると、Firefoxでは日本語確定に使用されたEnterが伝達されてくるのだが、Chromeでは伝達されない。

これについても注意が必要だ。