何かを登録する際、フォームでは必ずと言っていいほど、名前とフリガナを入力しなければいけません。今回紹介するるjavaScript「AutoRuby.js」はそんなフォームでのフリガナ入力を自動化してくれるというものです。

自動化と聞くとかなり複雑なカスタムをほどこそ無ければいけないのかなと思うのですが、そんなことは無く、簡単に利用することができます。簡単に手順を下記に記しておきます。

詳しくは以下

まずは「prototype.js（オフィシャル）」「AutoRuby.js（作者ブログ）」と二つのjavascriptをダウンロードします。次にこれをHead内に読み込みます。

<script type=”text/javascript” src=”prototype.js”></script>
<script type=”text/javascript” src=”auto_ruby.js”></script>

最後にinputタグにAutoRuby.jsを適用すれば実装完了です。

<input id="name" name="name" value="" type="text" />
<input id="ruby" name="ruby" value="" type="text" />

ちなみにひらがなで自動表示とカタカナで自動表示と選ぶことができ、「ふりがな（ひらがな）」で表示したい場合は、「var convFlag = 0;」「フリガナ（カタカナ）」で表示したい場合は、「var convFlag = 1;」とパラメータを指定してください。

かなり便利でユーザーの事を考えたスクリプトだと思います。フォームをお持ちの方でフリガナ入力がある方は是非試してみてください。

フォームのフリガナを自動入力させるAutoRuby.js | ホームページ制作・運営のヒント