autoKana.jsを使って入力文字を自動でひらがな・カタカナに補完する方法｜DAD UNION

autoKana.jsを使って入力文字を自動でひらがな・カタカナに補完する方法をご紹介します。
テキストボックスに入力した文字を自動でひらがなやカタカナ文字に補完してくれます。

Contents

入力文字を自動でひらがな・カタカナに補完するCSSの記述
入力文字を自動でひらがな・カタカナに補完するautoKana.jsファイルを読み込む
入力文字を自動でひらがな・カタカナに補完するHTMLの記述
autoKana.jsを使って入力文字を自動でひらがな・カタカナに補完するJavaScriptの記述
autoKana.js：入力文字を自動でひらがな・カタカナ文字表示するデモページ
ソース元：autoRuby.jsをDISってみる – Rubricks Project

入力文字を自動でひらがな・カタカナに補完するCSSの記述

※必要に応じて変更して下さい。

<style type="text/css" media="all">
<!--
body{
	margin: 0;
	padding: 0;
}
h1{
	text-align:center;
	font-size:18px;
	font-weight:bold;
	padding:15px 0;
}
.clWrap{
	width:650px;
	margin:0 auto;
	line-height:1.4em;
	font-size:14px;
}
-->
</style>

入力文字を自動でひらがな・カタカナに補完するautoKana.jsファイルを読み込む

※prototype.jsとautoKana.jsファイルを読み込みます。

<script type="text/javascript" src="prototype.js"></script>
<script type="text/javascript" src="autoKana.js"></script>

入力文字を自動でひらがな・カタカナに補完するHTMLの記述

※テキストボックスに文字を入力すると「ひらがな」と「カタカナ」に変換して別のテキストボックスに表示します。

<h1>入力文字を自動でひらがな・カタカナ文字表示します</h1>

<div class="clWrap">
<form id="auto_kana_form_1" method="POST">
	<div>名前</div>
	<input type="text" id="auto_kana_name_1" size="48" />
	<div>かな</div>
	<input type="text" id="auto_kana_kana_1" size="48" />
</form>
<br />

<form id="auto_kana_form_2" method="POST">
	<div>名前</div>
	<input type="text" id="auto_kana_name_2" size="48" />
	<div>カナ</div>
	<input type="text" id="auto_kana_kana_2" size="48" />
</form>
</div>

autoKana.jsを使って入力文字を自動でひらがな・カタカナに補完するJavaScriptの記述

※new AutoKana(‘入力エリアのテキストボックス’, ‘変換後のテキストボックス’)で文字を「ひらがな」に変換します。オプション{katakana:true, toggle:false}で「カタカナ」に変換できます。

<script type="text/javascript">
	var auto_kana_1 = new AutoKana('auto_kana_name_1', 'auto_kana_kana_1');
	var auto_kana_2 = new AutoKana('auto_kana_name_2', 'auto_kana_kana_2', {katakana:true, toggle:false});
</script>