javascript - 允许用户在输入字段中仅输入文本

Question

<分区>

Answer 1

您可能正在寻找正则表达式。 尝试在以下正则表达式的 keyUp 事件上测试字符串:

^[a-zA-Z0-9@]+$

代码:

// This will be triggered everytime a user types anything
// in the input field with id as input-field
$("#input-field").keyup(function(e) {
  // Our regex
  // a-z => allow all lowercase alphabets
  // A-Z => allow all uppercase alphabets
  // 0-9 => allow all numbers
  // @ => allow @ symbol
  var regex = /^[a-zA-Z0-9@]+$/;
  // This is will test the value against the regex
  // Will return True if regex satisfied
  if (regex.test(this.value) !== true)
  //alert if not true
  //alert("Invalid Input");

  // You can replace the invalid characters by:
    this.value = this.value.replace(/[^a-zA-Z0-9@]+/, '');
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<input type="text" id="input-field" />

更新:

没有jquery:

function validate() {
  var element = document.getElementById('input-field');
  element.value = element.value.replace(/[^a-zA-Z0-9@]+/, '');
};

<input type="text" id="input-field" onkeyup="validate();" />