Javascriptでバーコード入力処理
バーコードリーダーの入力は、何もしなくても入力される（ほぼキーボードと同じ）のですが、とりあえず入力処理の所を作ってみました。
手入力にも対応できるように英文字のチェックも簡単にですが入れてあります。特殊文字とかもほんとうはチェックしないといけないんだけど、まぁ、良いかなと……
一番上のテキストボックスは本来はhiddenタイプにして隠しテキストにしてしまいますが、テストなので見えるようにしました。
それからJavascriptそのままの処理とjQueryによる処理に別けてみました。jQueryの方が楽に処理（コーディング）できるけど、好みも有るので。
jQueryの「＄」が少し気を付ける必要があるので、参考にしてください。
//本来は隠し入力テキスト。半角数字のみ格納
<input type="text" id="hidden1" style="background-color:#aaa">
//javascriptで処理
<input type="text" id="text1" oninput="CheckInput()" onchange="setChange()">
<script>
function CheckInput(){
//全角英文字チェック
if(document.getElementById("text1").value.match(/[A-Za-zＡ-Ｚａ-ｚ]/g)){
alert("英文字が入っています。");
return;
}
if (document.getElementById("text1").value.length == 13){
//全角英数字を対象に置き換え
document.getElementById("hidden1").value=document.getElementById("text1").value.replace(/[Ａ-Ｚａ-ｚ０-９]/g,function(s){
return String.fromCharCode(s.charCodeAt(0)-0xFEE0);
});
}
}
function setChange(){
//全角英数字を対象に置き換え
if (document.getElementById("text1").value.length == 13){
document.getElementById("text1").value=document.getElementById("text1").value.replace(/[Ａ-Ｚａ-ｚ０-９]/g,function(s){
return String.fromCharCode(s.charCodeAt(0)-0xFEE0);
});
}
}
</script>
//jQueryで処理
<input type="text" id="text2" autofocus="">
<script type="text/javascript">
jQuery(function($){
$("#text2").on({
"keyup": function(e){
//全角英文字チェック
if($(this).val().match(/[Ａ-Ｚａ-ｚA-Za-z]/g)){
alert("英文字が入っています。");
return;
}
if ($(this).val().length == 13){
//全角英数字を対象に置き換え
$("#hidden1").val($(this).val().replace(/[Ａ-Ｚａ-ｚ０-９]/g,function(s){
return String.fromCharCode(s.charCodeAt(0)-0xFEE0);
}));
}
},
"change": function(e){
if($(this).val().match(/[Ａ-Ｚａ-ｚ０-９]/g)){
$(this).val($(this).val().replace(/[Ａ-Ｚａ-ｚ０-９]/g,function(s){
return String.fromCharCode(s.charCodeAt(0)-0xFEE0);
}));
}
}
});
});
</script>
実際の動きは下で。
と、書きましたが、他のWordPressで確認したjQueryのコードが全く動きません。
keyupイベントもchangeイベントも取れていない状況です。なぜかな？
ちなみにそのままのJavascriptは正常に動作しています。
このWordPressの環境（プラグインかな？いろいろ入れてるので、チェックが面倒で……）ではjQueryが動かないので、上のコーディングからjQueryの部分をカットします。jQueryの方が楽にコーディングできるけど、動かないんじゃんダメですもんね……寂しい(；_；)
//本来は隠し入力テキスト。半角数字のみ格納 //javascriptで処理
バーコードリーダーは簡易システムでは使い勝手が良いので良く使われると思います。
ただデータがキー入力バッファに溜まって一度にやって来るようなイメージなので、後ろのイベント処理をキャンセルできるとキー入力バッファに溜まったデータを破棄できそうなんですが、私は上手くキャンセルできなかったので、全角でバーコードを読み込み、プログラムで半角に変換し、変換した文字列に置き換えるような処理にしても、半角バーコードの後ろに全角バーコードが付いてきてしまう不具合が出てしまいました。
Windowsプログラムだと綺麗に処理できた記憶が有るのですが、なかなか思ったような処理にならないものですね。
まぁ、ちょいちょいとコーディングしただけなので、きっと良いでが有ると思うので、どこかで見つけたら追記します。
以上、「WordPress Javascriptでバーコード入力処理」でした。
