【バーコード入力をWebアプリで】 [バーコード]
一般的なUSBキーボードインターフェースのバーコードリーダーは、バーコードのスキャン結果をASCIIテキストで返します。
そこでバーコード入力をWebアプリで処理するためのJavaScriptコードを考えました。
Internet Explorerで確認しています。
マウスやキーボードは極力使わず，バーコードリーダーからの入力のみで自動的にページが遷移するようJavaScriptで制御しています。
---------------------------------------
<html>
<head>
<meta http-equiv="pragma" content="no-cache">
<meta http-equiv="Content-Type"
content="text/html; charset=x-sjis">
</head>
<body onload="init_load()">
<form name="barjs" method="post" action="barjs.asp">
<input type="text" name="barcode" style="ime-mode:disabled;"
size="20" autocomplete="off" onKeyUp='ReDirect_bar()'>
<input type=button value="リセット" onclick='CancelTo()'>
<%
'
' バーコードのスキャン結果を処理するスクリプト。
'
%>
</form>
</body>
</html>
<script Language="JavaScript">
//barcodeへの入力が10桁に達したらサブミットする。
function ReDirect_bar(){
f=barjs.barcode.value;
if (f.length >= 10) {
barjs.submit();
}
}
function CancelTo(){
location.href = "barjs.asp";
}
//ページロード時にフィールド"barcode"にフォーカスする。
function init_load(){
var element = document.getElementById("barcode");
element.focus();
}
</script>
-----------------------------------------
<body>のonLoadイベントで，ページの読み込み終了時init_load()をコールしてフィールド"barcode"にフォーカスします。
これでフィールド"barcode"をバーコードリーダーからの入力待ち状態にしています。
var element = document.getElementById("barcode");
element.focus();
フィールド"barcode"ではIMEを自動的にOFFにしてオートコンプリートもOFFにしています。
<input ...
style="ime-mode:disabled;"
autocomplete="off"
フィールド"barcode"は入力が10桁に達したら，自動的にサブミットし，次のバーコード入力待ちになります。onKeyUpイベントで10桁に達するまでキー入力がある度に桁数をチェックしています。
onKeyUp='ReDirect_bar()'
サブミットするとフィールド"barcode"の入力内容はサーバにポストされますので，Active Server PagesやPHPなどのサーバサイドスクリプトで処理することができます。
バーコードリーダーの読み取りエラーなどで入力が10桁に達しない場合のためにリセットボタンを設けています。
コメント 0