こんにちは。入力制御を行うjQueryのプラグインはいっぱいあるのですが、今回の要件にマッチするものがなかなか見つからなかったので、自分で作ってみました。
今回の要件: 入力フォームに半角数字しか入力できないようにする。全角数字が入力された時は半角数字に変換する。
今回の要件は数字のみが対象だったのですが、せっかくなので、ひらがなのみやアルファベットのみなどのメソッドも作ってプラグインにしました。
- input_restrictionプラグイン: 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: <input class="only-num" type="text" name="num" />
アルファベットのみ
- javascript
$('.only-alphabet').onlyAlphabet();
- html
<input class="only-alphabet" type="text" name="num" />
sample: <input class="only-alphabet" type="text" name="num" />
英数字のみ
- javascript
$('.only-alphanum').onlyAlphaNumeric();
- html
<input class="only-alphanum" type="text" name="num" />
sample: <input class="only-alphanum" type="text" name="num" />
ひらがなのみ
- javascript
$('.only-hiragana').onlyHiragana();
- html
<input class="only-hiragana" type="text" name="num" />
sample: <input class="only-hiragana" type="text" name="num" />
カタカナのみ
- javascript
$('.only-kana').onlyKana();
- html
<input class="only-kana" type="text" name="num" />
sample: <input class="only-kana" type="text" name="num" />
半角カタカナのみ
- javascript
$('.only-hankakukana').onlyHankakuKana();
- html
`<input class="only-hankakukana" type="text" name="num" />`
sample: <input class="only-hankakukana" type="text" name="num" />
電話番号入力用(半角数字, '-'のみ)
- javascript
$('.only-phonenumber').onlyPhoneNumber();
- html
<input class="only-phonenumber" type="text" name="num" />
sample: <input class="only-phonenumber" type="text" name="num" />
コラム
IEのみ対応ですが、ime-mode: disabled;を付けると全角モードを禁止できます。
- html
<input style="ime-mode: disabled;" type="text" name="num" />