読者です 読者をやめる 読者になる 読者になる

type=number の入力チェック

1年程前、全角数字入力を強制的に半角数字入力にしてバリデーションチェック処理を
軽減させるに、こんなものをここに投稿していた。
これは、input type="text" に対して有効な手段であり、
HTML5の type="number" では想定どおりにならない。

type="number" では、入力値の change イベントが捕捉できないのである。

type="text" ならば、
以下のチェックは成立する。

$('input[type="text"]').change(function(){
   var txt  = $(this).val();
   var han = txt.replace(/[0-9]/g, function(s){ return String.fromCharCode(s.charCodeAt(0)-0xFEE0); });
   var num = han.replace(/^[\-|ー|―|-]/, function(s){ return '-'; });
   $(this).val(num);
   if (num.match(/^(|-)[0-9]+$/)){
      $(this).css("background-color", "#ffffff");
   }else{
      $(this).css("background-color", "#ffa0a0");
   }

});

type="number" の場合は、
キーの UPぐらいしか捕捉できず、しかも半角数字以外の入力を拾えない。
せいぜい、以下のように仕掛けるのが手一杯である。

$('input[type="number"]').bind('keyup mouseup', function(){
   if ($(this).val().match(/^(|-)[0-9]+$/)){
      $(this).css("background-color", "#ffffff");
   }else{
      $(this).css("background-color", "#ffa0a0");
   }
});