こんにちは。入力制御を行うjQueryのプラグインはいっぱいあるのですが、今回の要件にマッチするものがなかなか見つからなかったので、自分で作ってみました。
今回の要件: 入力フォームに半角数字しか入力できないようにする。全角数字が入力された時は半角数字に変換する。
今回の要件は数字のみが対象だったのですが、せっかくなので、ひらがなのみやアルファベットのみなどのメソッドも作ってプラグインにしました。
https://github.com/djkazuma/input_restriction
動作はjQuery2.0.2で確認しています。
※ひらがな、カタカナ入力系は一部ブラウザ、OSで期待通りに動かない可能性があるので、今後修正予定です。
プラグインの読み込み
文字コードUTF-8で作成しているので、charsetを指定しないと文字化けでエラーになる可能性があります。
html
<script charset="utf-8" type="text/javascript" src="input_restriction.js"> </script>
下記に使い方の例を記載します。
数字のみ(全角数字は半角数字に変換される)
javascript
$('.only-num').onlyNumeric();
html
<input class="only-num" type="text" name="num" />
sample:
アルファベットのみ
javascript
$('.only-alphabet').onlyAlphabet();
html
<input class="only-alphabet" type="text" name="num" />
sample:
英数字のみ
javascript
$('.only-alphanum').onlyAlphaNumeric();
html
<input class="only-alphanum" type="text" name="num" />
sample:
ひらがなのみ
javascript
$('.only-hiragana').onlyHiragana();
html
<input class="only-hiragana" type="text" name="num" />
sample:
カタカナのみ
javascript
$('.only-kana').onlyKana();
html
<input class="only-kana" type="text" name="num" />
sample:
半角カタカナのみ
javascript
$('.only-hankakukana').onlyHankakuKana();
html
<input class="only-hankakukana" type="text" name="num" />
sample:
電話番号入力用(半角数字, ‘-’のみ)
javascript
$('.only-phonenumber').onlyPhoneNumber();
html
<input class="only-phonenumber" type="text" name="num" />
sample:
コラム
IEのみ対応ですが、”ime-mode: disabled;”を付けると全角モードを禁止にすることができます。
html
<input style="ime-mode: disabled;" type="text" name="num" />