前おき

某プログラミングスクールで、某フリーマケットWebアプリのコピーを作っていました。
その時の話です。

＜成果物レビュー＞
レビューア：入力フォームのラベルに（全角）って書いてあるのに、半角入力できるね〜
私：ふぁ！？！？？
レビューア：ユーザフレンドリーに作るなら、バリデーションかけてあげるべきですよ〜
私：（言われてみればそうだけど、本家も入力できたよ？！なんでよ？！？？！？

・
・
・
・

その後、すぐさま確認しました。
本家さまは半角を全角に自動変換すると言う素晴らしい配慮をされていました。
私のこの配慮のなさよ。私も住所入力で全角強要されたら直ぐさま買うの辞めちゃうでしょ？！

と、反省をしつつ、実現方法について考え、JSで実装することにしました。
その結果をメモります。（前置き長い。よく言われます

JavaScriptの表記めも

とりあえず、今回は全角／半角変換。
郵便番号に自動的に-入れるとかもやってみたので、そちらは今度のめも。

①半角→全角変換

全角文字はそのまま捨て置かれます。
※カタカナは含まれません

sample.js

$(function(){
  //半角→全角メソッド
  function toFullWidth(input) {
    return input.replace(/[!-~]/g,
        function(input){
        return String.fromCharCode(input.charCodeAt(0)+0xFEE0);
        }
    );
  };

  //イベント指定（対象のフォームIDごとに仕込み。
  $('#user_lastname').on('blur',function(e){
    $(this).val(toFullWidth($(this).val()));
  });

  $('#user_firstname').on('blur',function(e){
    $(this).val(toFullWidth($(this).val()));
  });
}

②全角→半角変換

半角はそのまま捨て置かれます。
※カタカナは含まれません

sample.js

$(function(){
  //全角→半角メソッド
  function toHalfWidth(input) {
    return input.replace(/[！-～]/g,
      function(input){
        return String.fromCharCode(input.charCodeAt(0)-0xFEE0);
      }
    );
  };

  //半角指定の項目は自動で半角変換
  $('#user_tel').on('blur',function(e){
    $(this).val(toHalfWidth($(this).val()));
  });
}

Railsのform_forやform_withを使っているとモデルを指定しているはずなので、基本的に同一のIDがhtmlに振られます。
なので、あまり意識せずとも全てにjsが掛かる！素晴らしい！

イベント発火対象のJQueryオブジェクトを複数指定できそうだけど、そこまでは踏み込みませんでした。

以上です。

参考

[JavaScriptでよく使う全角・半角を変換するスクリプト（メモ）]
https://minory.org/js-full-half-width.html
→カタカナ変換なんかも載ってました。

【JavaScript】全角／半角変換メモ

前おき

JavaScriptの表記めも

①半角→全角変換

②全角→半角変換

参考