[フォーム] jQueryでinputにひらがなだけ入力できるようにする

はじめに
HTML
jQuery
解説

はじめに

フォームで名前のふりがなを入力する欄に、ひらがなとスペースだけを入力させたい時などありませんか？

実際に案件で使用したコードを解説いたします。

HTML

<dl class="form-group">
  <dt>ふりがな</dt>
  <dd class="your-furigana">
    <input type="text" name="your-furigana" size="100" placeholder="例）たなか たろう" required>
  </dd>
</dl>

jQuery

$(function() {
  $('.your-furigana input').on('change',function(){
    var input = $(this).val();
    var result = input.replace(/(?=.*?[^\u3041-\u309F])[^\u3041-\u309F\s].*/, "");
    $(this).val(result);
  });
});