[jQuery] 数字しか入力できないInput

数字のみしか入力できないInputをjQueryで作ります。

$("input#hoge").attr({
	autocomplete: "off"
	
}).css({
	"ime-mode": "disabled"
	
}).keypress(function(e) { 
	var st = String.fromCharCode(e.which);
	if ("0123456789-".indexOf(st,0) < 0) { return false; }
	return true;
	
}).bind('paste', function(e) {
	e.preventDefault();
	
});
  • 02, 05行は、それぞれオートコンプリートとIMEの設定
     これはjs(jQuery)で書かなくて直接書いても良い
  • 07~10行は、入力できる文字を数字のみに制限(マイナスも可能)
     マイナスの数値を扱う可能性もあるのでマイナスも入力可に
  • 12~13行は、貼り付け(ペースト)の制限
     せっかく制限してもペーストされたらアレなので

これだけだと「-1」なんかはともかく、「------」とかも入っちゃうので
blur時にほげほげする必要はありますね。


#追記 2013/09/11

bindをあまり理解してない頃に書いた奴ですね。

$(hoge).on({
	'paste': function(e) {
		e.preventDefault();
	},
	'keypress': function(e) {
		var st = String.fromCharCode(e.which);
		if ("0123456789-".indexOf(st,0) < 0) { return false; }
		return true;
	}
});

こう書いた方がスマートですかね。動作は一緒ですが。

#追記 2014/04/25

バックスペースも効かないようだったので書き直しました。
配列に入れて数字以外を潰す感じです。

$("#hoge").on({
  'paste': function(e) {
    e.preventDefault();
  },
  'keyup': function () {
    var $this = $(this);
    var s = new Array();
    
    $.each( $this.val().split(''), function(i, v){
      if( v.match(/[0-9]/gi) ) s.push(v);
    });
    
    if(s.length > 0){
      $this.val( s.join('') );
    } else{
      $this.val(''); 
    }
  }
});
twitterfacebookhatenafacebook