概要
ユーザがフォームに入力したとき、指定の形式 (半角,全角,ひらがな,全角カタカナ) に自動で変換してあげるための 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のように全角英数の文字を入力すると、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 の動作の違いなのですが、
という内容となっています。
ご指摘ありがとうございました。また、何か気になることがございましたらお気軽にコメントいただければと思います。今後ともよろしくお願いします
コメントフォーム
実験室に戻る