jquery.autoKana.jsを使ってみる

フォームで名前を入力したときに、自動でフリガナも入力する機会があったので、jquery.autoKana.jsを試してみました。

使い方

jquery.autoKana.jsは下記からダウンロードできます。
harisenbon/autokana · GitHub

HTML内に必要なファイルを読み込みます。

<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<script src="./jquery.autoKana.js"></script>

HTML

#firstnameと#lastnameで入力したときに、#firstname-furiganaと#lastname-furiganaにふりがなを自動入力します。

<dl>
	<dt>名前(漢字)</dt>
	<dd>
		<input type="text" name="firstname" id="firstname" />
		<input type="text" name="lastname" id="lastname" />
	</dd>
</dl>
<dl>
	<dt>名前(ふりがな)</dt>
	<dd>
		<input type="text" name="firstname-furigana" id="firstname-furigana" />
		<input type="text" name="lastname-furigana" id="lastname-furigana" />
	</dd>
</dl>

JavaScript

$(function() {
	$.fn.autoKana('#firstname', '#firstname-furigana');
	$.fn.autoKana('#lastname', '#lastname-furigana');
});

jquery.autoKana.jsのデモページ
　

オプションでkatakana:trueを追加すると、ふりがながカタカナでの追加になります。

JavaScript

$(function() {
	$.fn.autoKana('#firstname', '#firstname-furigana', {katakana:true});
	$.fn.autoKana('#lastname', '#lastname-furigana', {katakana:true});
});

jquery.autoKana.jsのデモページ2
　

【参考サイト】

• JavaScript – jquery.autoKana.jsで自動カナ入力する – Qiita
• harisenbon/autokana · GitHub