JavaScript

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

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

入力文字を自動でひらがな・カタカナに補完する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>

autoKana.js:入力文字を自動でひらがな・カタカナ文字表示するデモページ

autoKana.js:入力文字を自動でひらがな・カタカナ文字表示するデモ

ソース元:autoRuby.jsをDISってみる – Rubricks Project

ソース元:autoRuby.jsをDISってみる – Rubricks Project

お問合せや会員登録フォーム等に設置すると、利用者にとっては便利です。

 
※流用される場合は自己責任でお願いします。
 デモページタグ内のGoogleアナリティクスタグは流用しないで下さい。