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