入力されたテキストを自動で指定の形式(半角, 全角, ひらがな, 全角カタカナ)に変換する

概要

ユーザがフォームに入力したとき、指定の形式 (半角,全角,ひらがな,全角カタカナ) に自動で変換してあげるための JavaScript ライブラリです。

使い方と説明

動作させるためには、ダウンロードした valueconvertor.js を (X)HTML ファイルの head 要素内などで読み込みます。

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

さらに、変換の動作の目印とするための class 属性値を設定します。<input type="text" class="ascii" />のように、input 要素に対して、指定の class 属性値をつけると動作します。class 属性値と動作の内容の対応表については以下の通りです。

値の形式	class 属性値	動作内容
半角	ascii	全角英数で入力すると半角英数に変換されます。
全角	multibyte	半角英数や半角カタカナで入力すると全角の英数、カタカナに変換されます。
全角ひらがな	hiragana	全角カタカナ、半角カタカナで入力するとひらがなに変換されます。
カタカナ	katakana	ひらがな、半角カタカナで入力すると全角カタカナに変換されます。
半角カタカナ不可	fullwidth-kana	半角カタカナのみを全角カタカナに変換されます。
全角カタカナ不可	halfwidth-kana	全角カタカナのみを半角カタカナに変換されます。

例えば<input type="text" class="ascii" />のような input 要素にＡＢＣ１２３のように全角英数の文字を入力すると、ABC123 のように半角英数の文字に自動で変換されます。

カスタマイズする

valueconvertor.js の 20行目付近の

	conf : {
		asciiClass        : "ascii",
		multibyteClass    : "multibyte",
		hiraganaClass     : "hiragana",
		katakanaClass     : "katakana",
		fullwidthKanaClass: "fullwidth-kana",
		halfwidthKanaClass: "halfwidth-kana"
	},

を変更することで input 要素に指定する class 属性値を変更することができます。

例えば asciiClass : "ascii" の "ascii" を "hankakuEisu" とすれば、 <input type="text" class="hankakuEisu" /> のような input 要素に全角英数文字を入力したときに自動で半角英数にすることができるように変更できます。

ラベル	初期値(変更可能箇所)	動作
`asciiClass`	`ascii`	全角英数で入力すると半角英数に変換するための class 属性値
`multibyteClass`	`multibyte`	全角カタカナ、半角カタカナで入力するとひらがなに変換するための class 属性値
`hiraganaClass`	`hiragana`	半角または全角のカタカナを全角のひらがなに変換するための class 属性値
`katakanaClass`	`katakana`	ひらがな、半角カタカナを全角カタカナに変換するための class 属性値
`fullwidthKanaClass`	`fullwidth-kana`	半角カタカナのみを全角カタカナに変換するための class 属性値
`halfwidthKanaClass`	`halfwidth-kana`	全角カタカナのみを半角カタカナに変換するための class 属性値

トラックバックURI

http://www.yomotsu.net/lab/javascripts/valueconvertor/trackback

通りすがりさんからのコメント

2008年5月28日 19:41

タイトルと内容が食い違っているようです。
デモページもCSSが切れているようです。

masterさんからのコメント

2008年5月28日 21:09

通りすがりさん

ご指摘ありがとうございます。運用時に誤って更新してしまったようです。修正させていただきました。

ありがとうございました!!

質問さんさんからのコメント

2008年7月23日 15:00

素晴らしいプログラムをありがとうございます。使わせていただきます。
ところで、multibyteとhiraganaの動作上の違いはなんでしょう？
試してみたところmultibyteは動作しないようですが・・・

adminさんからのコメント

2008年8月14日 20:34

@質問さん :

はじめまして。コメントありがとうございます。反応が遅くなり大変申し訳ありません。

この記事内の説明文が間違っておりました。修正させていただきます。実際の multibyte と hiragana の動作の違いなのですが、

multibyte は半角の英数を全角の英数に変換したり、半角の片仮名を全角の片仮名に変換します。
hiragana は半角または全角の片仮名を全角の平仮名に変換します

という内容となっています。

ご指摘ありがとうございました。また、何か気になることがございましたらお気軽にコメントいただければと思います。今後ともよろしくお願いします

コメントフォーム

実験室に戻る

このページの目次