ユーザーが入力中に入力ボックスから特定の文字を自動的に削除します

Question

フォームを検証しようとしています。私が作業している入力ボックスは数字のみで構成する必要があります。ユーザーが自動的に削除したい文字を入力すると、数字を入力すると削除されないはずです。

ここにある私のJS：任意のヘルプは高く評価され

<input type="Custom" name="donation-amount" class="inpt-first form-control" id="donation-amount" onclick="if(this.defaultValue == this.value) this.value = ''" onblur="if(this.value=='') this.value = this.defaultValue" value="Custom"> 

：ここ

var defaultValue = 10; 

$(document).ready(function() { 

     $('#donation-amount').keyup(function() { 
     if($(this).val()) { 
     $('#display-amount').text($(this).val()); 
    } else { 
     $('#display-amount').text(defaultValue); 
     $("#default").addClass('active'); 
     $("#btn2").removeClass('active'); 
     $("#btn3").removeClass('active'); 
    } 
     if (isNaN($(this).val())) { 
     console.log("false") 
     } else { 
     console.log("true") 
     } 

     }); 
    $(".selectvalue").click(function() { 
     $('#display-amount').text($(this).val()); 
    }); 

    $(".buttons .btn").click(function(){ 
     $(".buttons .btn").removeClass('active'); 
     $(this).toggleClass('active'); 
    }); 
    $('#display-amount').text($('#default').val()); 

}); 

とは私のhtmlです！

Answer 1

あなたはこれが欲しいですか？ See this fiddle

var defaultValue = 10; 

$(document).ready(function() { 
     $('#donation-amount').keyup(function() { 
     // check if numbers are type 
     var reg = /^\d+$/; 
     if(reg.test($(this).val())) { 
      $('#donation-amount').val($(this).val()); 
      } else { 
     $('#donation-amount').val(defaultValue); 

      }  
     }); 
}); 

Answer 2

の代わりに数字以外の文字を削除、ちょうど最初の場所でそれらを無視する、またはnumberとして入力タイプを定義します。

HTML Text Input allow only Numeric input

Answer 3

あなたはHTML5の<input type="number">の利点を活用することもできます。しかし、それがあなたの状況ではうまくいかない、または望ましくない場合は、jQueryのkeydown()関数を試してみてください。

HTML

<input id="inputField" type="text">

jQueryの

$(function() { 
    $("#inputField").keydown(function (e) { 
     if (e.which != 0 && e.which != 8 && (e.which < 48 || e.which > 57)) { 
      $("#quantity").html('').append(); 
     } 
    }); 
}); 

これは、イベントを発射するキーは、数字と数字キーの割り当て範囲内であることを確認します。イベントを発生させるキーがこれらの条件と一致しない場合、出力は行われません。ただし、入力が数値範囲内であると判断された場合は、入力フィールド自体に（append()）が追加されます。

これは、標準のJavaScriptを使用して達成することができることは注目に値する：window.addEventListener('keydown', function (e) {});