テキストボックスに入力された文字を素のJavaScriptで全角と半角の変換

調べてもズバリそのものが見つからなかった内容なので、テキストボックスに入力された文字について、フォーカスが離れたタイミングで全角から半角、あるいは半角から全角に変換するための素のJavaScriptによる記述についてご紹介します。

jQueryはブラウザ互換のためには便利だったもので、もう過去の産物です。脱jQueryでパフォーマンスを上げましょう。

どうして全角と半角で変換するのか？

ホームページなどで年齢、電話番号や住所など入力しているときに、半角で入力してくださいとか、全角で入力してくださいなどとエラーが出た経験はありませんか？

半角にせよ、というのはまだしも、いまだに全角での入力を求めるシステムなどもありますよね。どちらでもよきに計らえよ、とユーザーは思うものです。そもそも全角って日本独特ですしね。いつまで鎖国を続ける気ですかね（話脱線しますが、令和何年とかも知らんので、全部西暦にして欲しいです）。

作り手からすると、どちらでも受け付けるに越したことはないと理解しつつも、エラー文言で示せば大丈夫だろう、と思いがちです。

しかし、「使い手」は「作り手」のようにITリテラシーが高い人ばかりとは限りません。それで離脱する人は少なからずいると思った方が良いです。

どちらでも受け付けるようにするのではなく、勝手に変換すればよいのです。

変換するタイミングについて

JavaScriptは実行のタイミングを決める必要があります。実行タイミングはパフォーマンスのために必要最低限にするべきです。基本的にはHTMLを全て読み込んだ時に実行されるのですが、その時点ではテキストボックスに文字が入力されてないので、テキストボックスからフォーカスが離れた時に実行するというプログラミングを書きます。

コード

HTML

<input type="text" id="demo">

全角から半角に変換するJavaScript

//全角から半角
function replaceZtoH(str){
  return str.replace(/[！-～]/g, function(s){
    return String.fromCharCode(s.charCodeAt(0) - 0xFEE0);
  });
}

const el = document.getElementById('demo');

demo.addEventListener('blur', () => {
   const br = el.value;
   const ar = replaceZtoH(br);
   el.value = ar;
});

半角から全角に変換するJavaScript

//半角から全角
function replaceHtoZ(str){
  return str.replace(/[!-~]/g, function(s){
    return String.fromCharCode(s.charCodeAt(0) + 0xFEE0);
  });
}

const el = document.getElementById('demo');

demo.addEventListener('blur', () => {
   const br = el.value;
   const ar = replaceHtoZ(br);
   el.value = ar;
});

解説

addEventListenerのblurイベントはフォーカスが外れた時に作動します。テキストボックスからフォーカスが外れた時に、そのテキストボックスに入力されている値を取得し、その値をあらかじめ定義した関数で半角から全角（または全角から半角）に変換。変換した値をテキストボックスにセットしています。

まとめ

みなさん、ぜひこのぐらいの心づかいはしましょう！