Q&A
分からないのですが、バーコードリーダーでバーコードを読み取るとinput:textにバーコードの値が表示されるのですか？
webシステムでバーコードを読み取り処理を行うシステムを作成しております。
発生している問題・エラーメッセージ
input:text に対してバーコードリーダーにて読取・入力を行うと以下の結果となる。
IE：桁落ちは起きない
Edge,Chorme：桁落ちが高確立で起きる。（OS、PCなどの条件は不明）
html
1<input type="text" id="test"> 2<div id="result"></div> 3<script> 4 const test = document.getElementById('test'); 5 const result= document.getElementById('result'); 6 test.focus(); 7 test.addEventListener('keypress', test_keypress); 8 function test_keypress(e) { 9 if (e.keyCode === 13) { 10 const new_element = document.createElement('p'); 11 new_element.textContent = test.value; 12 result.appendChild(new_element); 13 test.value = ""; 14 } 15 } 16</script> 17
桁落ちが起こってしまう原因や、対処の仕方をご教授ください。
追記
メモ帳への出力では桁落ちはありません。
また上記ソースでは現象は確認できませんでした。※input:textのidを変更しています。
現象の起こる特定のidで以下の結果が得られました。（読みとり回数:約100/使用バーコード5種類）
| ブラウザ | 結果 |
|---|---|
| chorme | 桁落あり |
| edge | 桁落あり |
| firefox | 桁落なし |
※桁落ちの例：A1170100 → A110100
※各ブラウザで特定の桁落ち発生バーコードに偏りがでたが...因果関係は不明である。
input:textにフォーカスを当て、USB接続のバーコードリーダーで読み取った文字列をweb画面上のテキストボックスに表示しています。
> USB接続のバーコードリーダーで読み取った文字列をweb画面上のテキストボックスに表示しています。
そのコードを教えてください。
5ugarVVatch1ngさん、
USB接続のバーコードリーダーは一般的に普通のキーボードと同様に振る舞い、読み取り終わったときにEnterを挿入してくるので、m_teratailさんのおっしゃる「input:textにフォーカスを当て、USB接続のバーコードリーダーで読み取った文字列をweb画面上のテキストボックスに表示しています。」はすでに提示されているコードがすべてだと思います（特に不足があるようには思いません）
m_teratailさん、
バーコードリーダーそのものの不良の可能性は、IEで問題ないということで大丈夫だと思うのですが、メモ帳などに入力させたときは百発百中で欠損なく動いているのでしょうか。
thyda.eiqauさん
すみません。知りませんでした。教えていただきありがとうございます。
5ugarVVatch1ngさん、
説明が足りずすみません。
thyda.eiqauさん、
これまでIEで運用していたものをedgeに移行した際に桁落ちが頻発するという経緯で本件を調査しています。
古いシステムでそろそろ構築のタイミングかなと考えつつも、最低限のものでも桁落ちが発生したので質問させていただきました。
バーコードリーダーの不良も疑い、数個のバーコードを使用しましたが違いはありませんでした。
以上、よろしくお願いします。
メモ帳や、ブラウザの開発コンソールに直打ちでは、桁落ちの再現が確認できませんでした。
桁が落ちるというのは、具体的にどうなるのでしょうか？例えば期待する読み取り値が "123456789ABCDEF(Enter)" のとき、ご提示のコードではどのように出力されますか？
if (e.keyCode === 13) { の行の前に console.log(e.keyCode); を、
test.value = ""; の行の前に console.log('<p> added'); を、
それぞれ追加すると、コンソールにはどのように出力されますか？（読み取った値が外部に出せない内容であれば適当にマスクしてください）
EdgeもChromeもベースは同じなので、ブラウザ依存かもしれませんね。
もし時間があればfirefoxでの挙動も試してみると良いかもしれません。
ちなみにソース見ればなんとなくはわかりますが、桁が落ちるのはinput要素内で既に落ちているという認識でよいですかね。
それを確かめていなければ、test.value = "";を消してみて、inputの中身とnew_elementのvalueが同じかどうかも気になります。
あとは(ないとは思いますが)keyCode === 13が変なところで入っているとか。
if文をコメントアウト等してただのinput要素に入力しても桁落ちするのか気になりますね。
thyda.eiqauさん
以下の結果が得られました。※前半が桁落ち時です。
51
50
49
48
51
54
50
13
<p> added
51
50
49
48
49
51
54
50
13
<p> added
Yuuさん
inoutイベントで監視、出力したところ桁落ちがそのまま出力されました。
また、すべてのイベントをなくし入力をしてみたところ桁落ちが確認できました。
ありがとうございます。
firefoxで桁が落ちないのであれば個人的にはブラウザが原因な気がします。
残る対応策(ブラウザが原因か確認する方法)としては、edgeにieモードがあるのでそれを試すくらいですかね。
ieは現在主流で使用されているhtmlタグやjsに対応していないので悪く言われがちですが、逆を返すとフロント側の更新がされず安定して動くんですよね。
それに比べてchromeなんかはバンバン自動アップデートされるので、そのおかげでこれまで動いていたものが動かなくなったって話も実際に聞くので、ブラウザ制限(アプリまたはバージョン)による運用をするしかないのかもしれません。
(ここまでしか助言はできそうにありません...)
> また上記ソースでは現象は確認できませんでした。※input:textのidを変更しています。
ご提示のコードは検証用のミニマムなコードだと思いますが、この検証用コードでidだけを本番用に変更すると現象再現するのですか？
ところで、手元にバーコードリーダーがないので確認できないのですが、WebHIDを使ってバーコードリーダーの入力を監視しようとしたけどできなかったのでWebUSBで試したら成功した、という投稿がStack Overflowにありました。
input要素に単にテキスト入力をするという時点で動きが悪いということですので、根本的に別のアプローチが必要かも、ということでご参考になれば……
https://stackoverflow.com/questions/67773640/webhid-api-inputreport-not-triggering-with-barcode-scanner
thyda.eiqauさん
＞ご提示のコードは検証用のミニマムなコードだと思いますが、この検証用コードでidだけを本番用に変更すると現象再現するのですか？
おっしゃる通り、信じがたいことに現象としてそのようなことが再現しています。
WebUSBというAPIは初めて知ったので調べてみます。貴重な情報ありがとうございます。
回答2件
0
そのバーコードリーダの設定で、データ送信間隔の設定ができませんか。
いくぶん送信速度を遅くするといいかと思います
投稿2022/04/18 13:02
総合スコア88178
0
同様の事象かはわかりませんが、EdgeのオートコンプリートをOFFにすることで解決しないでしょうか。
もしくは、入力コントロール(input)のオートコンプリートをOFFに設定（autocomplete="off"）。
IEもしくはEdgeのIEモードでは事象は発生せず、Edge使用時に事象が発生しておりました。
投稿2022/08/29 04:57
総合スコア14
あなたの回答
tips
プレビュー
