th_photo-1420708392410-3c593b80d416

【jQuery】自動的にカナ入力してくれるautoKana.jsプラグインはいまや必須!

2015.03.01   9066


エントリーフォーム最適化(EFO)って重要ですよね。あるサイトでは色々なエントリーフォームの最適化施策を実施したところそれまでのフォームコンバージョン率が2%台だったのが、なんと44%台まで上がったとか…
スゴイですよね。

そんなフォーム最適化で今回のautoKana.jsプラグインは重宝します。例えば氏名と氏名のカナのテキストフォームがあった場合、氏名を入力するだけで氏名のカナのフォームも勝手に入力されてしまうというなんて素敵なプラグインなのでしょうか

百聞は一見にしかず、です。まずはデモを見てみてください。

autoKana.jsプラグインのオススメ/ポイント

  •   漢字やかなを入力するだけで勝手にカタカナが入力される
  •   エントリーフォーム最適化(EFO)にピッタリ
  •   スマホの入力にも対応

autoKana.jsプラグインのデモ


autoKana.jsプラグインのページ


autoKana.jsプラグインの使い方

それではautoKana.jsプラグインの使い方を見ていきましょう。
それぞれのコードを載せますね。

HTMLコード

<form>
<label for="userName">氏名</label>
<input type="text" id="userName" placeholder="こっちに漢字を書き込むと…">
<label for="userNameKana">氏名カナ</label>
<input type="text" id="userNameKana" placeholder="こっちにカタカナが勝手に入力される">
</form>

チェックポイント

漢字のテキストフォームとカタカナのテキストフォームの2つに任意のIDを指定します。

JavaScriptコード

<script src="./jquery.autoKana.js"></script>
<script>
$(function() {
    $.fn.autoKana('#userName', '#userNameKana', {
        katakana : true  //true:カタカナ、false:ひらがな(デフォルト)
    });
});
</script>

チェックポイント

optionのkatakanaでtrueを指定するとカナに変換されます。何も指定しないと平仮名に変換されて入力されますよ。

プラグインへ一言

なんてユーザーフレンドリーなんだ!

Feedlyで最新プラグインをチェック

follow us in feedly

良ければフォローもお待ちしております