フォームで名前の入力をカナにも自動入力してくれるjquery.autoKana.jsの使い方

フォームで名前の入力をしたら自動でフリガナ入力欄にも入力してくれるjquery.autoKana.jsの使い方です。ユーザーが入力する手間が省けるので、ユーザービリティの向上にもつながりますね。

サンプルを用意しました。

メールフォームサンプル

ユーザビリティ向上のためのメールフォームサンプルです。

jquery.autoKana.jsのダウンロード
フォームの作成
jquery.autoKana.jsの適用
振り仮名をカタカナにする
jquery.autoKana.jsの注意点

jQuery関連記事

jquery.autoKana.jsのダウンロード

jQuery本体とjquery.autoKana.jsを準備します。
ダウンロードはGitHubから。

GitHub - harisenbon/autokana: Library for automatically rendering Furigana for inputted Japanese Text

Library for automatically rendering Furigana for inputted Japanese Text - harisenbon/autokana

ダウンロードしたらhtmlに読み込みます。

html

<script src="./jquery.js" type="text/javascript"></script>
<script src="./jquery.autoKana.js" type="text/javascript"></script>

フォームの作成

html

<ul class="inputcolor">
  <li>お名前</li>
  <li><input type="text" name="name" id="name"></li>
  <li>お名前(ふりがな)</li>
  <li><input type="text" name="namekana" id="namekana"></li>
</ul>

お名前、お名前(ふりがな)を用のフォームを準備します。この時idもそれぞれ振っておきます。
#nameを入力した時に、#namekanaが自動入力されるようにします。

jquery.autoKana.jsの適用

JavaScript

$(function() {
    $.fn.autoKana('#name', '#namekana');
});

$.fn.autoKanaでユーザーが入力をする#nameと、自動入力される#namekanaを指定します。
これだけでふりがなが自動で入力されるようになります。

振り仮名をカタカナにする

JavaScript

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

これだけで自動入力される振り仮名がカタカナになります。
デフォルトは、katakanaの値が、falseになっているので変更してやればカタカナにできます。

jquery.autoKana.jsの注意点

・入力欄から文字を削除した場合、カナはフリガナのフィールドからも削除されますが、入力された文字が漢字だった場合は、文字を削除しても、この通りに反映されない。
・keydownを利用しているので、コピペされたテキストは非対応
・ローマ字は非対応

となっているので注意が必要です。