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

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

$(".input-phonetic").on({
    'paste': function(e) {
        e.preventDefault();
    },
    'keyup': function () {
        var $this = $(this);
        var s = new Array();
        $.each( $this.val().split(''), function(i, v){
            if( v.match(/^[\u3040-\u309F]+$/gi) ) {
                s.push(v);
            }
        });
        if(s.length > 0){
            $this.val( s.join('') );
        } else {
            $this.val('');
        }
    }
});
  1. 貼り付けで変な文字を入れられないようにペーストを弾く(これは任意)
  2. キーボード入力が終わった時に1文字ずつ確認する(/^[\u3040-\u309F]+$/giで平仮名をチェック)
twitterfacebookhatenafacebook