How to Automatically Complete Input Characters to Hiragana and Katakana Using autoKana.js

In this article, I will introduce how to use autoKana.js to automatically complete input characters to Hiragana and Katakana. This script automatically converts the characters entered into a text box to Hiragana or Katakana.

CSS for Automatically Completing Input Characters to Hiragana and Katakana

Feel free to modify it as needed.

<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>

Loading autoKana.js File for Automatically Completing Input Characters to Hiragana and Katakana

Load the prototype.js and autoKana.js files.

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

HTML for Automatically Completing Input Characters to Hiragana and Katakana

When you input text into a textbox, it will convert it to “Hiragana” or “Katakana” and display it in another textbox.

<h1>Automatically Display Input Characters as Hiragana or Katakana</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>

JavaScript for Automatically Completing Input Characters to Hiragana and Katakana Using autoKana.js

Use new AutoKana(‘input text box’, ‘output text box’) to convert characters to “Hiragana”. By using the option {katakana:true, toggle:false}, you can convert characters to “Katakana”.

<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>

Demo Page: Automatically Display Input Characters as Hiragana or Katakana Using autoKana.js

Demo page for autoKana.js: Automatically display input characters as Hiragana or Katakana

Source: Critique of autoRuby.js – Rubricks Project

Source: Critique of autoRuby.js – Rubricks Project

Installing this script on inquiry or membership registration forms can be very convenient for users.

※ Please use it at your own risk if you reuse it.
Do not reuse the Google Analytics tags within the demo page tags.