如何用字符串替换不需要的角色

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

当字符无效时，您必须取消关键事件，以便实际上未插入文本方面。但是，只有在将角色放置在现场之前取消事件时，这才能起作用。要实现这一目标，请使用keydown事件而不是keyup事件，因为到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>