概要
ユーザがフォームに入力したとき、指定の形式 (半角,全角,ひらがな,全角カタカナ) に自動で変換してあげるための 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 の動作の違いなのですが、
という内容となっています。
ご指摘ありがとうございました。また、何か気になることがございましたらお気軽にコメントいただければと思います。今後ともよろしくお願いします
裏目さんからのコメント
2008年9月17日 19:48
初めまして。
先ほどみつけまして、使わせていただきました。
そこで、報告させていただきたいのですが、「multibyte」をclassに定義した際に、動作JSとして動作はしているようでしたが、なぜか変換（半角片仮名から全角カタカナへ）されませんでした。
こちらで確認した変換されなかった半角文字は「ｱｲｳｴｵ」です。
動作環境
OS：WinXP
ブラウザ：ForeFox3.0.1
テスト環境：ローカル
です。
multibyteについての解釈違いでしたら、申し訳ありませんが、スルーしていただいて結構です。
お忙しいとは思いますが、是非検証の程宜しくお願いいたします。
adminさんからのコメント
2008年9月23日 17:05
@裏目さん :
はじめまして。ご利用いただいたうえに、ご報告までしてしていただきありがとうございます。
multibyte を指定したときの動作の件、確かに確認しましたのでフィードバックいただいた内容を元に修正させていただきました。
このたびは詳しい内容でのフィードバックをしただきありがとうございました。また不具合やご不明点などがございましたらご連絡いただければ幸いです。
今後ともよろしくお願いいたします。
通りすがり２さんからのコメント
2008年10月27日 1:19
demo拝見しました
demoの一番上、
「半角英数」
ですが、「英」（たとえば全角のＡなど）は何も処理されません
ここは、
「半角数字」
もしくは
「半角数」
ではないのでしょうか？
（一番下の「半角英数」は、全角数字および全角英字が処理されていましたので）
後は、当然っちゃ当然ですが（仕様が異なるので）、漢数字は対応してませんでした
adminさんからのコメント
2008年10月27日 23:26
@ 通りすがり 2 さん
こんにちは。コメントいただきありがとうございます。フィードバックいただいた件について確認させていただきましたが、当方の環境では問題なく動作いたしました。お手数ですがもう一度ご確認いただけないでしょうか。
demo 内の半角英数の項目については、input, textarea ともに同じ処理を行っています。
よんさんからのコメント
2008年12月19日 11:15
すばらしいプログラムありがとうございます！
ところでascii（全角英数で入力すると半角英数に変換するための class 属性値）を設置してみたところ、全角のー（ハイフォン）は半角になりませんでした。
これは修正できませんでしょうか？
お忙しいところすみません。
adminさんからのコメント
2009年1月6日 19:30
@よんさん :
反応が遅れすみません。フィードバックいただきありがとうございました。
『－』 と 『-』 の変換はもともとできていたのですが、『ー』 は別物で変換ができなかったのが原因でした。Ascii 文字に変換する際に例外として、『ー』 は 『-』 に変換されるように変更いたしました。
demo からご確認できますのでお試しください。またなにかお気づきの点がございましたらご指摘いただけると嬉しいです。
ありがとうございました。
よんさんからのコメント
2009年1月9日 11:24
お礼が遅くなってすみませんでした。
わざわざありがとうございました。
>『－』 と 『-』 の変換はもともとできていたのですが、『ー』 は別物で変換ができなかったのが原因でした。
そうですね、全角かなの「ー」は、ハイフォンでは無いですね(笑)。
たまにこれでフォームに入れてきて、「返信メールが届かない！」と言ってくる人がいるので助かりました！
これからも素晴らしいプログラムを期待しております。
ありがとうございました。
Julienさんからのコメント
2009年2月27日 11:21
非常に便利な機能ですので、是非使わせていただけたらと思っていますが、半角カタカナから全角への変換がされません。valueconvertor.js をダウンロードし、head要素内にご指定のscriptを挿入し、textareaでclass指定をfullwidth-kanaとしていますが、その他の条件がありましたら、ご指摘のほど、よろしくお願いします。
adminさんからのコメント
2009年2月27日 11:59
@Julien さん
はじめまして。ご参照くださりありがとうございます。
『半角カタカナから全角カタカナへの変換』の目印用の class 属性については class=”katakana” でうまくいかないでしょうか。
Julienさんからのコメント
2009年2月27日 14:50
adminさん、クイックなご返答有難うございます。class=”katakana”で試してみましたが、やはり変換されません。私はjavascriptに関する知識が、あまりないので恐縮ですが、の挿入場所は、headと/headの間でOKでしょうか。また、本体のhtmlは、
shift-jisで作られていますが、そのあたりは、OKでしょうか。いろいろ申し訳ありませんが、こちらの機能が使えると非常に便利になるため、何とか動かしたいと考えております。
Julienさんからのコメント
2009年2月27日 15:18
すみません。↑で入力ミスをしてしまいました。srcを指定するscriptの置き場所としてheadと/headの間でOKかどうかということです。よろしくお願いします。
Julienさんからのコメント
2009年2月27日 15:55
adminさん、動きました。 をに変え、class=”fullwidth-kana”の指定で、iuput areaからfocusが外れる際に、半角カナは全角になりました。大変有難うございました。
ﾍﾟｷｻｺﾞｿさんからのコメント
2009年3月18日 16:39
初めまして。
業務で、カナ・英数は全角半角両方ともヒットするような検索画面を作らされている者です。
色々ジャバスクを探していたら、こちらへ辿り着きました。ありがとうございます。
以前、問い合わせされた方がいらっしゃるようですが、「multibyte」をclassに定義した際に、
うまく変換されませんでした。異なるのはブラウザです。
こちらで確認した変換されなかった半角文字は ﾋﾟﾁｬﾋﾟﾁｬ です。
変態ではありません。
pichapicha は全角の ｐｉｃｈａｐｉｃｈａと 見事変換されております！！
動作環境
OS：WinXP
ブラウザ：IE(Version6.0)
テスト環境：ローカル
です。
ご対応頂ければありがたいと思います。
どのように努力すればこのようなコードが組めるのか、羨ましく思っております
綺麗なデザインで使い勝手の良いフォームを作るチュートリアル | 札幌のホームページ制作 Webデザイン会社 アイタス｜CMS構築｜SEO・SEM｜ビジネスブログ Movable Type・WordPressカスタマイズさんからのコメント
2009年3月19日 8:33
[...] 日本語でのチェックについては、入力されたテキストを自動で指定の形式(半角, 全角, ひらがな, 全角カタカ…も利用したいところです。 [...]
cocoro21さんからのコメント
2009年6月3日 6:13
はじめまして！
素晴らしいプログラムをありがとうございます。使わせていただいています。
今まで半角入力のために、”ime-mode:disabled”を使用していましたが、
Validatorでエラーが出るのが、気になっていたので、色々と探していたところ、この実験室の『valueconvertor.js』に出会いました。
無事エラーがなくなり、心のとげが取れました！ありがとうございました！
これからも素晴らしいプログラムを期待しております！
匿名さんからのコメント
2009年6月12日 1:14
お世話になります。
Demoで試したら、
「ヸ」が変換されないようですけど…
コメントフォーム
実験室に戻る