jsで全角を半角に直す

Webデザイン

フォームに数字を入れてもらう場合、
数字を半角で管理したい、ということありますよね

入力制限などで、ユーザに半角を入力してもらうことも可能ではありますが
とてもめんどう。。
全角になっているというだけで、エラーが出てしまっては、離脱の原因にも

全角が入力されたとしても、システムで半角に直してあげるほうがユーザには優しいですよね

ということで、jsで全角文字を半角に直す方法です。

<input onkeyup="textChange(this)">
<script type="text/javascript">
var half = '0123456789';
var em = '0123456789';
function textChange(obj){
if(typeof(obj.value)!="string")return false;
var text = obj.value;
for( i=0; i<em.length; i++ ){
var regex = new RegExp(em[i],"gm");
text = text.replace(regex,half[i]);
}
obj.value = text;
}
</script>

処理の流れは以下のようなかんじです。
2つの配列に、対応するように全角と半角を入れます。
入力された文字が、全角の配列の文字と一致するか比べます。
一致したら、半角の配列の中の、対応した数値と置換します。

RegExpはマッチングをみる際に正規表現にする指定です。
gmは、以下の項目を元に指定されています。

 オプション   説明
 g   全文検索を行う
 i   大文字、小文字の区別無くマッチする 
 m   複数行のマッチに対応する 

replaceは文字置換です。
replace(置換前, 置換後);
のように使います。

アルファベットでも同じことがしたい、という場合、
配列にアルファベットも追加してあげればできます

 

コメントを残す

メールアドレスが公開されることはありません。 * が付いている欄は必須項目です