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");
}
});