HTMLのフォームのテキストボックスに、数値のみのキー入力してほしくないということもあると思いますが、そういう時のための実装を考えてみたので紹介。
HTML
<input class="OnlyNumber" style="ime-mode: disabled;" onkeydown="return OnlyNumber(event)" oncontextmenu="return false;" type="text" placeholder="数値のキー入力のみ" />
JavaScript
// 数値のみの入力にする
function OnlyNumber(evt)
{
var evt = evt || window.event;
var c = evt.keyCode;
// 48～57=0～9のキー、96～105=テンキーの0～9、8=バックスペース、9=タブキー、32=スペースキー、37=左矢印キー、39=右矢印キー、46=Deleteキー、18=Altキー、112～123=F1～F12キー、
if((48<=c && c<=57) || (96<=c && c<=105) || c==8 || c == 9 || c==32 || c == 37 || c == 39 || c == 46 || c == 18 || (112<=c && c<=123) ){
return true;
}
return false;
}
実行結果
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ではうまく動きませんでした。
なお、この実装をしたから数値のみしかパラメータとして送られてこないと安心せず、サーバー側でも数値チェックをするようにしましょう。簡単に数値以外の文字を入れることはできるので。
コメント