2022-5-24

ASCII文字の全角から半角への変換

数値入力で input[type="number"]を使ったら、ユーザから問い合わせが増えてしまった話 - Qiita

さて、ウェブアプリケーションをリリースしてユーザが触れるようになると、数値の入力ができないという問い合わせが発生しました。
キーボードを叩いても、数値入力フォームは無反応。テキスト入力フォームは入力できるのに、と……。

わかってしまえばとても単純で、ユーザの IME で全角入力のまま数字キーを叩いてたことが原因でした。
全角数字は valid な数値として扱われないため、キーを叩いてもフォームは反応しません。

こちらの記事のとおり、半角しか許容していないと使いにくくなるケースがあって、それを避けるためにフロントエンドでBlurタイミングにでも全角から半角への変換をすることがある。

やり方に関しては基本的には上記記事にある通り、

function toHalfWidth(strVal){
  // 半角変換
  var halfVal = strVal.replace(/[！-～]/g,
    function( tmpStr ) {
      // 文字コードをシフト
      return String.fromCharCode( tmpStr.charCodeAt(0) - 0xFEE0 );
    }
  );
 
  return halfVal;
}

で文字コードをシフトする方法であらかたいけるのだが、一部問題が有る。

波ダッシュ（〜）と全角チルダ（～）は違う文字 | レコチョクのエンジニアブログ

Windowsで「から」と検索：～(←全角チルダ)が出てくる
Macで「から」と検索：〜(←波ダッシュ)が出てくる
今回の「〜」事件はここら辺が原因で起きたみたいです…。

こちらの記事の通り、波線はOSによって出てくるものが違うためその対応が必要。

あと、もう一点、マイナスを表したい時の横棒に関してもMacでは意図した文字コードの物が出せなかった。これに関してはWindowsで検証していないので不確定だが、こちらに関しても自動変換の対応をする際は考慮が必要かもしれない。