Development Reference

[JavaScript] フリガナを自動挿入する

フォーム入力の際に、名前とセットでカナ入力項目が付いてくるケースは少なくない。
しかし、この入力が結構面倒くさいので、それを自動化するライブラリを作成した。

同様の機能を持つライブラリは既にメジャーなものが出回っているが、それらはユーザの名前の入力に合わせて勝手に（自動で）カナ入力される場合が多い。自動で入力された方が確かに見映えはいいが、その場合には、ユーザの意思に関わらずカナが入力される点と、入力されたカナが間違っていた場合に、逆にユーザがそれを消す手間が発生する可能性があり、賛否両論ある所だと思う。

そこで、本ライブラリでは入力形式を 自動／チェックボックスの選択式（デフォルトチェック有り・無し）／ボタン押下による挿入 の4パターンから選択して設定できるようにした。チェックボックスやボタンはjavascriptにより自動で挿入される。

使い方

ZIPファイルを解凍後、JSファイルを任意のディレクトリに配置し、本機能を実装したいhtmlでJSファイルを読み込む。

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

次に、JSファイルを開き、各設定項目をサイトに合わせて編集する。

※設定方法の詳細はデモページを参照

//-----------------------------------------
// 対象要素
//-----------------------------------------
[ 名前のinput要素のname属性,対応するカナのinput要素のname属性,文字種（ひらがなorカタカナ）,入力形式 ]
target : [
	[ 'name1', 'kana1', ktxConstant.letterType.katakana, ktxConstant.insertType.auto ],
	[ 'name2', 'kana2', ktxConstant.letterType.hiragana, ktxConstant.insertType.auto ],
	//[ 'name3', 'kana3', ktxConstant.letterType.katakana, ktxConstant.insertType.check ],  削除行
	[ 'name4', 'kana4', ktxConstant.letterType.hiragana, ktxConstant.insertType.checked ],
	[ 'name5', 'kana5', ktxConstant.letterType.katakana, ktxConstant.insertType.button ]
],
//-----------------------------------------
// 設定値
//-----------------------------------------
conf : {
	labelStrHiragana : 'ふりがなを自動挿入する', // チェックボックスに表示する文字列（ひらがな）
	labelStrKatakana : 'フリガナを自動挿入する', // チェックボックスに表示する文字列（カタカナ）
	buttonStrHiragana : '名前からふりがなを挿入する', // ボタンに表示する文字列（ひらがな）
	buttonStrKatakana : '名前からフリガナを挿入する', // ボタンに表示する文字列（カタカナ）

トラックバックURL

http://mashimonator.weblike.jp/mt/mt-tb.cgi/104

コメント投稿フォーム