jquery.autoKana.jsでフォームにフリガナを自動入力する

注意事項

  • 自動入力の対象は全角ひらがなでの入力のみ
  • 英字と記号はフリガナフィールドに出力されない
  • コピー&ペーストしたテキストはフリガナに変換されない
  • 一度変換した文字の削除は反映されない
  • 実際の読み方と違う読み方で入力した場合、違う読み方のままフリガナに変換される
  • 一度入力した文字の前や間に入力すると、フリガナフィールドでは末尾に追加される

jquery.autoKana.jsの使い方

ダウンロード

jquery.autoKana.jsをGitHubからダウンロードします。

ダウンロードしたら、jqueryと共にhtml内に設置します。
jqueryはこちら

<script src="https://code.jquery.com/jquery-3.5.1.min.js"></script>
<script type="text/javascript" src="js/jquery.autoKana.js"></script>

javascriptの設定

name属性で判別

$(function() {
    $.fn.autoKana('input[name="namae"] ', 'input[name="namaekana"]', {katakana:true});
});

id属性で判別

$(function() {
    $.fn.autoKana('#namae', '#namaekana', {katakana:true});
});