[JS] 数値のみ入力可能なコントロール

Javascriptで数値のみ入力可能にする

通常の input type=’text’ に対し、半角数字のみの入力を可能になるような制御を、Javascript で実装します。

実装方法は単純です。input の onKeyupイベント で正規表現で半角数字以外の文字について空文字に置換します。

実装例

<input type="text" onkeyup="if(event.keyCode==9||event.keyCode==16) return; this.value=this.value.replace(/[^0-9]+/i,'')\" />
<!--
    if(event.keyCode==9||event.keyCode==16) return;
    this.value=this.value.replace(/[^0-9]+/i,'');
-->

以下のコントロールで動きを確認してください。

説明

正規表現 /[^0-9]+/i にマッチする文字をすべて空文字に置き換えます。これは半角数字以外の文字にマッチする正規表現です。この処理が指定の input 要素に対して入力があった場合に実行されることで、半角数字しか入力できないようにします。

keyCode: 9 と keyCode: 16 の押下時には置換処理を実行せずに終えるようにしています。9がタブキー、16がシフトキーです。文字の置換処理が実行されるとテキストの選択状態が消えてしまうので、タブキーとコントロールキーの押下時には置換処理を実行しないようにします。この処理を入れておけば、タブで遷移してきた場合の全選択状態を維持できます。

ショートカットキーによる貼り付けには対応しますが、右クリックから貼り付けされると、半角数字以外も入力されてしまうので注意が必要です。

以上、簡単な制御のみですが、半角数字のみ入力可能にするJavascriptでした。