[jQuery]フォームに名前入れたらフリガナが勝手に埋まるアレ

2015/7/28 未分類

Reading Time: 1 minute

名前打ったら自動的にフリガナが入るやつ付けてって要望があった。
探したら案の定あるでやんのよ。
でもあれよ、俺の名前マトモじゃないから読み通りに打っても変換出来ねーのよ。
それに近頃は予測変換のこともあるし、どうなんだろうね。

準備

jQueryのライブラリ
jquery.autoKana.js

組み込み

<!doctype html>
<html>
<head>
	<meta charset="utf-8">
	<title>無題ドキュメント</title>
	<script src="https://code.jquery.com/jquery-1.11.1.min.js"></script>
	<script src="js/jquery.autoKana.js"></script>
	<script type="text/javascript">
		$(document).ready(function() {               
			$.fn.autoKana('#name', '#kana', {
				katakana : true  //true：カタカナ、false：ひらがな（デフォルト）
			});
		});
	</script>
</head>
<body>

<form>
	<input type="text" id="name" placeholder="名前">
	<input type="text" id="kana" placeholder="ナマエ">
</form>

</body>
</html>

<!doctype html>

<html>

<head>

<title>無題ドキュメント</title>

$(document).ready(function() {

$.fn.autoKana('#name', '#kana', {

katakana : true //true：カタカナ、false：ひらがな（デフォルト）

});

</script>

</head>

<body>

<form>

</form>

</body>

</html>

こんな感じで組む。
id振るだけ。
超簡単。
デモ作った

で。

あれよ。
ajaxzipとセットで覚えとけばいいんじゃないの。
あとあれ、バリデーション。