Horic Design

a-blog cmsやJavaScriptなどの情報を発信しています。

7ページ目 | js

typeがnumberのテキストフィールドに数字以外の文字を入力させないようにする

テキストフィールドに数字以外の文字を一切受け付けない用にするためのコードを考えてみました。

$("body").on("keydown","input[type=number]",function(e){
    if((e.which >= 48 && e.which <= 57) || e.which == 46 || e.which == 8 || e.which == 37 || e.which == 39){
        return true;
    }else{
        e.preventDefault();
    }
});

このとき、十時キーの右と左の入力と、deleteキー、バックスペースの入力は受け付けないと不便なので、if文の中で、それを受け付けるようにしました。
左のキーが37で右のキーが39、deleteキーが46でbackspaceが8です。
でも環境によって違うかもしれません。
keycode表は下のサイトで確認してみてください。


ちなみにe.preventDefault()でブラウザの既存の機能が発動するのを妨げることができます。
よって、キー入力ができなくなるということです。


jsでもし〜が定義されてなければ...を代入という記述を簡略化


今回は、便利にブラウザ上でjsが編集できる僕が一年前に作ったプログラミング学習環境、Atlas Editorをつかって、コードを書いてみる。

いままで僕はjsでもし値がなければ、という処理をif文で書いていたが、| |演算子で簡略化出来ることを知った。

var number = null;
var output = 0;
var ret = number || output;

上のようなコードを書いたとき、retには0が代入される。
実行結果はこちら



堀 悟大

有限会社アップルップル マークアップエンジニア。2014年高知大学理学部卒業。学生時代にHTML5のCanvas要素を使ってゲームを作っていたことでWeb全般に興味をもつ。アップルップル入社後はa-blog cmsを便利に使うための機能の実装や、HTML5の技術を使ったデジタルサイネージの実装を行う。趣味は英語。読むことも話すことも好き。

エントリーリスト

カテゴリーリスト

タグクラウド