[jQuery] 平仮名しか入力できないInput

会員登録フォームなんかで使うであろう「ふりがな」。
“ひらがな”のみ入力許可とするInputを作ってみる。


  $(".input-phonetic").on({
    'paste': function(e) {
      e.preventDefault();
    },
    'blur': function() {
      var $this = $(this);
      var val = $this.val();

      if (val === '') {
        return;
      }

      var strs = [];
      $.each(val.split(''), function(i, value) {
        if (value.match(/^[u3040-u309f]+$/)) {
          strs.push(value);
        }
      });

      if (strs.length !== 0) {
        $this.val(strs.join(''));
      } else {
        $this.val('');
      }
    }
  });
  1. 貼り付けで変な文字を入れられないようにペーストを弾く(これは任意)
  2. キーボード入力が終わった時に1文字ずつ確認する(/^[\u3040-\u309F]+$/giで平仮名をチェック)