jqueryを使用してのカナ、かな欄の自動入力

氏名などの入力欄で「かな」欄がある場合に、漢字の方を入力するだけで「かな」欄も自動入力できるようにしたい。

jquery.autoKana.jsのインストール

jqueryが使用できるプラグインで、使用方法も大変簡単なので導入してみる。
https://github.com/harisenbon/autokana
からダウンロードできます。
ダウンロードした「jquery.autoKana.js」を任意の場所に置きます。
ここでは「/public/js/common/jquery.autoKana.js」に設置したと仮定します。

肝は
$.fn.autoKana('入力元', '自動入力先', {katakana : false});
第三引数のkatakanaはデフォルトfalseです。false=ひらがなで true=カタカナで自動入力してくれます。

使用方法

htmlに下記のように記載していきます。

hoge.html

<head>
　：
　：
<script type="text/javascript" src="/public/js/common/jquery.autoKana.js"></script>
　：
　：
　：
<script type="text/javascript">
<!--
jQuery(function($){
    $.fn.autoKana('#name', '#nameKana', {katakana : false});
});
-->
</script>
</head>
<body>
　：
　：
<form>
<label for="name">氏名</label>
<input type="text" id="name">
<label for="nameKana">氏名かな</label>
<input type="text" id="nameKana">
</form>
　：
　：

問題点

下記のように色々ありますが、これらは仕方ないと思います。
１、全角カナ、半角カナ、ローマ字、コピペ、オートコンプリートの入力には非対応
２、氏名欄で漢字にした後に文字を削除した場合、かな欄への削除反映ができない。
ただし、全て削除した場合はかな欄も削除されます。漢字にする前の削除は反映されます。
３、氏名欄で入力した後にフォーカスを山|本にもっていって山山本とした場合、カナ欄は「やまやまもと」にならず「やまもとやま」となります。

以上