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

chromeで0以上の整数入力に限定する

以前、chrome で、何がなんでも全角入力させない を書いたが、

半角で0以上の整数入力に限定する場合が欲しくなった。

「.」のキーイベントコード:190
「+」のキーイベントコード:187 + ShiftKey
「-」のキーイベントコード:189

を keydown で捕捉することにして、、

<input type="text" class="number-input">

0以上の整数のみ。

$(".number-input").focus(function(eo){
   $(this).prop('type','number');
}).blur(function(eo){
   $(this).prop('type','text');
}).bind("paste",function(){
   return false;
}).keyup(function(eo){
   if (eo.keyCode==243 || eo.keyCode==240 || eo.keyCode==28){
      $(this).trigger($.Event("blur"));
      $(this).trigger($.Event("focus"));
   }
}).keydown(function(eo){
   if (eo.keyCode==229 || eo.keyCode==189 || eo.keyCode==190 || (eo.keyCode==187 && eo.shiftKey)){
      return false;
   }
});


前のも書き並べると、、、

半角数字、'-' と '+' と'.'小数点 のみ

$("input[type='text']").focus(function(eo){
   $(this).prop('type','number');
}).blur(function(eo){
   $(this).prop('type','text');
}).bind("paste",function(){
   return false;
}).keyup(function(eo){
   if (eo.keyCode==243 || eo.keyCode==240 || eo.keyCode==28){
      $(this).trigger($.Event("blur"));
      $(this).trigger($.Event("focus"));
   }
}).keydown(function(eo){
   if (eo.keyCode==229){
      return false;
   }
});

半角英数字、記号のみ

$("input[type='text']").focus(function(eo){
   $(this).prop('type','tel');
}).blur(function(eo){
   $(this).prop('type','text');
}).bind("paste",function(){
   return false;
}).keyup(function(eo){
   if (eo.keyCode==243 || eo.keyCode==240 || eo.keyCode==28){
      $(this).trigger($.Event("blur"));
      $(this).trigger($.Event("focus"));
   }
}).keydown(function(eo){
   if (eo.keyCode==229){
      return false;
   }
});

でも、chrome限定です。