jquery.autoKana.jsで自動カナ入力する

概要

日本語入力に対応するカナ入力を自動化するライブラリautokanaの使い方メモです。

Webアプリの登録フォームで氏名に対応するカナを自動入力するライブラリについて調べたところ、
メジャーなものはAutoRuby.jsとそこから派生したautoKana.js、jquery.autoKana.jsの3つでした。
機能面ではあまり差がない模様なので、今回はJQueryプラグインであるjquery.autoKana.jsを採用しました。

ライブラリ名	特徴
AutoRuby.js	prototype.jsベースのフリガナ自動変換スクリプト
autoKana.js	AutoRuby.jsをベースに手を加えたもの
jquery.autoKana.js	autoKana.jsをjQueryベースに書き換えたもの

使用例

autokana_sample.html

<script src="../../public/javascripts/jquery-1.10.2.min.js"></script>
<script src="../../public/javascripts/jquery.autoKana.js" language="javascript" type="text/javascript"></script>

<div>
    <label for="user_name" class="">氏名</label>
    <input type="text" id="user_name">
</div>
<div>
    <label for="user_name_kana" class="">カナ</label>
    <input type="text" id="user_name_kana">
</div>

<script type="text/javascript">
    $(document).ready(
        function() {               
            $.fn.autoKana('#user_name', '#user_name_kana', {
                katakana : true  //true：カタカナ、false：ひらがな（デフォルト）
        });
    });
</script>

制約事項

使い方は至ってシンプルで、ユーザビリティの向上に役立ちますが
以下の制約事項があるようです。

• 自動入力の対象となるのは全角ひらがなでの入力のみ

  • 全角カナ、半角カナ、ローマ字の入力には非対応
  • コピペによる入力には非対応
  • オートコンプリートによる入力には非対応

• 【氏名】欄で文字を削除した場合、【氏名（カナ）】欄への反映が不完全

  • ひらがなの削除は反映される
  • 【氏名】欄の入力値をすべて削除すると【氏名（カナ）】もすべて削除される
  • 一度変換した文字の削除は反映されない（漢字、カタカナ）
  • スペースの削除は反映される場合はされない場合がある（前後の文字に影響される？）

• 【氏名（カナ）】に入力済みの状態で【氏名】を変更すると、【氏名（カナ）】の末尾にカナが追加される