入力フォームで全角英数字が入力された時に、自動で半角英数字に変換する方法です。
PHPの場合は mb_convert_kana()という関数があり、オプションを指定すればあらゆる変換が可能なのでJavaScriptやjQueryにも同様の関数があると思いっていましたが、見当たりませんでした。
（もしかしたら見当たらないだけで、関数が存在しているのかもしれません・・・）
文字コード表を使って判断するような感じの方法で変換を行ってみました。
半角を全角に変換するプログラム
全角英数・半角英数の文字コードの区切りの場所から-65248の間が半角英数の文字コードになります。
10進数、16進数での表記があります。
JavaScriptで半角に変換する方法
|
0 1 2 3 4 5 |
// 半角に変換（１０進数） str.replace(/[Ａ-Ｚａ-ｚ０-９]/g, function(s) { return String.fromCharCode(s.charCodeAt(0) - 65248); }); |
|
0 1 2 3 4 5 |
// 半角に変換（１６進数） str.replace(/[Ａ-Ｚａ-ｚ０-９]/g, function(s) { return String.fromCharCode(s.charCodeAt(0) - 0xFEE0); }); |
これを使えば全角英数を半角英数に変換できます。
jQueryでフォームの入力値を半角に変換
|
0 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 |
<script type="text/javascript"> $(function(){ $(".keyword").blur(function(){ charChange($(this)); }); charChange = function(e){ var val = e.val(); var str = val.replace(/[Ａ-Ｚａ-ｚ０-９]/g,function(s){return String.fromCharCode(s.charCodeAt(0)-0xFEE0)}); if(val.match(/[Ａ-Ｚａ-ｚ０-９]/g)){ $(e).val(str); } } }); </script> |
3行目：blur はフォーカスが離れた時の処理を行います。
４行目：全角→半角変換処理はcharChangeという関数を作り、それを読み込みます。
８行目：charChange関数を作成します。
９行目：テキストボックスの値をvalという変数に入れます。
10行目〜12行目：全角英数を半角英数に変換しています。
XHTML
|
0 1 2 |
<p><input type="text" class="keyword"></p> |
フォームのテキストボックスにクラス名を指定します。
半角を全角に変換（参考）
全角英数・半角英数の文字コードの区切りの場所から+65248の間が半角英数の文字コードになります。
|
0 1 2 3 4 5 6 7 8 9 |
// 全角に変換（１０進数） str.replace(/[A-Za-z0-9]/g, function(s) { return String.fromCharCode(s.charCodeAt(0) + 65248); }); // 全角に変換（１６進数） str.replace(/[A-Za-z0-9]/g, function(s) { return String.fromCharCode(s.charCodeAt(0) + 0xFEE0); }); |
