JavaScript: 入力制御を行うjQueryプラグインinput_restrictionを作ってみた

こんにちは。入力制御を行うjQueryのプラグインはいっぱいあるのですが、今回の要件にマッチするものがなかなか見つからなかったので、自分で作ってみました。

今回の要件: 入力フォームに半角数字しか入力できないようにする。全角数字が入力された時は半角数字に変換する。

今回の要件は数字のみが対象だったのですが、せっかくなので、ひらがなのみやアルファベットのみなどのメソッドも作ってプラグインにしました。

動作は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" />
Ruby on RailsによるWEBシステム開発、Android/iPhoneアプリ開発、電子書籍配信のことならお任せください この記事を書いた人と働こう! Ruby on Rails の開発なら実績豊富なBPS

週刊Railsウォッチ

インフラ

BigBinary記事より

ActiveSupport探訪シリーズ