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.
