キーアップイベントで不要な文字をstring.emptyに置き換えるにはどうすればいいですか？

Question

私はtextareaを使用しています。数字、カンマ、およびスペースを受け入れたいだけです。私が達成しようとしているのは、ユーザーが許可しない以外のものを入力した場合です。例えば

、

123 is valid 
123a should be 123 
1a23v should be 123 

は、私は次のようなアプローチが、運を試してみました。

アプローチ-1：これは私に本当の偽を与えますが、最後のエントリを削除する方法がわかりません。

$("#my-text-area").on("keyup", function(value) { 
 
    var regex = new RegExp(/^[0-9, ]*$/); 
 
    var input = this.value; 
 
    var new_value = regex.test(input); 
 
    alert(new_value); 
 
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<textarea id="my-text-area"></textarea>

アプローチ-2：私は、私が使用している正規表現は、私が欲しいものを検証することを知っているsubString

$("#my-text-area").on("keyup", function(value) { 
 
    var regex = new RegExp(/^[0-9, ]*$/); 
 
    if (!regex.test(this.value)) { 
 
    var inputString = this.value; 
 
    //alert(inputString); 
 
    var updatedString = inputString.substr(0, inputString.length - 1) 
 
    alert(updatedString); 
 
    $("my-text-area").val(updatedString); 
 
    } else { 
 
    alert("Valid"); 
 
    } 
 
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<textarea id="my-text-area"></textarea>

を使用します。

$("#my-text-area").on("keyup", function(value) { 
 
    var regex = new RegExp(/^[0-9, ]*$/); 
 
    if (!regex.test(this.value)) { 
 
    alert("Invalid"); 
 
    } else { 
 
    alert("Valid"); 
 
    } 
 
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<textarea id="my-text-area"></textarea>

Answer 1

文字が有効でない場合は文字が実際にテキストエリアに挿入されないように、あなたはキーイベントをキャンセルしなければなりません。ただし、キャラクターがフィールドに置かれる前にイベントがキャンセルされた場合にのみ有効です。これを達成するには、イベントの代わりに​​イベントを使用します。これは、時刻がkeyupになると、その文字はすでにフィールドに入っているためです。フィールドに配置される前にテストする必要があります。このようにコードを記述すると、フィールドから最後の（無効な）文字を削除する心配はありません。

入力をテストするには、this.valueに対してテストしないでください。これは既にテキストエリアにあるものです（これは悪い文字かもしれません）。また、その時までには、文字が表示されないようにするのは遅すぎます挿入された。代わりに、押されたkeyをテストする必要があります。

$("#my-text-area").on("keydown", function(evt) { 
 

 
    var regex = new RegExp(/^[0-9, ]*$/); 
 

 
    // As long as the user didn't hit backspace, delete or any of the arrow keys.... 
 
    if(evt.keyCode !== 8 && evt.keyCode !== 46 && 
 
    evt.keyCode !== 37 && evt.keyCode !== 38 && evt.keyCode !== 39 && evt.keyCode !== 40){ 
 
    
 
    // Test the key that was inputted, not the value of the textarea 
 
    if(!regex.test(evt.key)){ 
 
     evt.preventDefault(); // Cancel the event 
 
     evt.stopPropagation(); // Prevent event bubbling 
 
    } 
 
    
 
    } 
 
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<textarea id="my-text-area"></textarea>

Answer 2

これはあなたに役立ちますがあります。

JS

<script type="text/javascript"> 
function Validate(event) { 
    var regex = new RegExp("^[0-9-!@#$%*?.,]"); 
    var key = String.fromCharCode(event.charCode ? event.which : event.charCode); 
    if (!regex.test(key)) { 
     event.preventDefault(); 
     return false; 
    } 
}  
</script> 

HTML

<textarea onkeypress="return Validate(event);"></textarea>