HTMLのテキストボックスを、できるかぎり半角数値のキー入力のみにする


HTMLのフォームのテキストボックスに、数値のみのキー入力してほしくないということもあると思いますが、そういう時のための実装を考えてみたので紹介。

HTML

JavaScript

実行結果

IEとFirefoxとChromeで確認しています。

何をやっているかというと、キーを押された時に、OnlyNumberという関数を実行し、その返り値を返し、右クリックして貼り付けされないよう、oncontextmenu(右クリックされた時の処理)をretun falseにし、右クリックメニューが表示されないようにしています(貼り付け対策)。
また、JavaScript側の7~9行目で数値入力以外が入力される可能性のないキーのみを許可しています。

なお、スタイル属性にime-mode:disabledとすることにより、IEとFirefoxでIMEを強制英数字入力モードにしています。このime-modeというのはIEが独自に実装したCSSプロパティですが、どうやらFirefoxでも動くようです。
参考:ime-mode-スタイルシートリファレンス
上記URLによると、ime-modeは、古いChromeだと動いたようなのですが、最近のバージョンでは動かないようです。

jQueryでイベント設定してやろうと思ったんですが、どうもうまく動かなかったのでタグの中にイベント属性を入れ、そこで処理を実装しました。
参考までにjQueryでイベント設定したサンプルは下記の通り。IEとFirefoxではうまく動きませんでした。

なお、この実装をしたから数値のみしかパラメータとして送られてこないと安心せず、サーバー側でも数値チェックをするようにしましょう。簡単に数値以外の文字を入れることはできるので。

コメントを残す

メールアドレスが公開されることはありません。