使用jQuery/JavaScript检测数字或字母？

Question

我希望使用if语句只在用户输入字母或数字时运行代码。

我可以使用以下代码：

if (event.keyCode == 48 || event.keyCode == 49 || event.keyCode == 50 || ...) {
  // run code
}

有没有更简单的方法？也许有些按键在所有网络浏览器中都不能使用？

- ajsie

---

只是添加一个评论，keycode和which已经被弃用，建议使用KeyboardEvent.key。 - Stephen Tetreault

Answer 1

如果你想检查一定范围的字母，可以使用大于和小于符号：

if (event.keyCode >= 48 && event.keyCode <= 57) {
  alert('input was 0-9');
}
if (event.keyCode >= 65 && event.keyCode <= 90) {
  alert('input was a-z');
}

使用正则表达式进行更动态的检查：

const input = String.fromCharCode(event.keyCode);

if (/[a-zA-Z0-9-_ ]/.test(input)) {
  alert('input was a letter, number, hyphen, underscore or space');
}

请查看MDC文档，了解keyCode属性与which属性之间的差异以及它们适用于哪些事件。

- Andy E

---

请注意，这必须在“keypress”事件中完成，而不是“keydown”事件中。 - Tim Down

请注意，奇怪的是，String.fromCharCode 可以将非可键入的按键转换为字符。例如，当我在我的 Mac 上按下左命令键时，会得到“[”，而右键则会得到“]”。 - devios1

不要忘记数字键盘：**(event.keyCode >= 96 && event.keyCode <= 105)** =P - Thomas C. G. de Vilhena

@techie_28：这完全取决于事件。如果可以的话，我建议只处理_keypress_，因为数字键盘键具有相同的keyCode。 - Andy E

这个回答现在已经过时了。请参考@Gibolt的回答。 - Alwin Kesler

Answer 2

使用 event.key 和现代JS！

不再需要数字代码。您可以直接检查key。

const key = event.key.toLowerCase();

if (key.length !== 1) {
  return;
}

const isLetter = (key >= 'a' && key <= 'z');
const isNumber = (key >= '0' && key <= '9');

if (isLetter || isNumber) {
  // Do something
}

你也可以使用简单的正则表达式。 ^$ 确保有1个字符，i 忽略大小写。

/^[a-z0-9]$/i.test(event.key)

或单独：

const isLetter = /^[a-z]$/i.test(event.key)
const isNumber = /^[0-9]$/i.test(event.key)

- Gibolt

---

这是错误的！(key >= "a" && key <= "z")几乎会对任何东西返回true（例如，当 key = Insert时）。/[a-z]/i.test('Insert')也是如此。 - torvin

有一个你忽略了的 length !== 1 检查。修复了正则表达式。 - Gibolt

假设 event.key.length === 1 是否可以安全地覆盖每个字母、数字、空格和符号？我一直在测试 key.length 并发现控制键的长度大于 1。但仍不确定这是否是一个好方法。 - Alwin Kesler

我不能保证这适用于除数字和字母以外的任何内容，这也是最初的问题。一些国际键盘可能具有>1长度的键。对于控制、退出等，请直接检查像“Enter”这样的值，而不是长度。 - Gibolt

@alwin-kesler event.key.length - undefined

Answer 3

首先，如果你要这样做，请确保它是在keypress事件中进行的，因为这是唯一可以可靠地获取用户输入字符信息的事件。然后我会采用Andy E建议的方法：

document.onkeypress = function(evt) {
   evt = evt || window.event;
   var charCode = evt.which || evt.keyCode;
   var charStr = String.fromCharCode(charCode);
   if (/[a-z0-9]/i.test(charStr)) {
       alert("Letter or number typed");
   }
};

如果你想检测退格键，我建议使用keydown事件，并检查keyCode是否为8，因为一些浏览器（包括Chrome）不会为退格键触发keypress事件。

- Tim Down

---

这是一个更好的答案，因为这可能是人们正在寻找的行为。 - Matthew Hager

如果您想检查退格键，我会使用 if (charCode == 8) {...}。我已经尝试过这个方法，但 onkeypress 不会对退格键触发。 - TKoL

@TKoL：有趣。它在Firefox中触发了，但在Chrome中却没有。这与2010年不同了。 - Tim Down

@TKoL：或者它已经改变了？我现在不太确定，经过一番谷歌搜索。不过在肯定之前，我通常会检查这样的事情。 - Tim Down

“delete” 在多个平台上，包括 Chrome 上的 jsfiddle 和 Windows Store HTML 应用程序中，对于按键事件没有响应。 - TKoL

Answer 4

if (event.keyCode >= 48 && event.keyCode <= 90) {
  // the key pressed was alphanumeric
}

- Douwe Maan

Answer 5

对于数字值：

function validNumeric() {
  var charCode = event.which ? event.which : event.keyCode;
  var isNumber = charCode >= 48 && charCode <= 57;

  if (isNumber) {
    return true;
  } else {
    return false;
  }
}

这里，48到57是数字值的范围。

对于字母数值：

function validAlphabetic() {
  var charCode = event.which ? event.which : event.keyCode;
  var isCapitalAlphabet = charCode >= 65 && charCode <= 90;
  var isSmallAlphabet = charCode >= 97 && charCode <= 122;

  if (isCapitalAlphabet || isSmallAlphabet) {
    return true;
  } else {
    return false;
  }
}

这里，65至90是大写字母（A-Z）的范围，而97至122是小写字母（a-z）的范围。

- MD Sulaiman

Answer 6

正如 @Gibolt 所说，你应该使用 event.key。

因为 charCode、keyCode 和 which 正在被弃用。

- Fede Scuoteguazza

Answer 7

要在使用 <input> 或 <textarea> 时检测字母和数字，您可以使用 input 事件。

当 <input> 或者 <textarea> 的值改变时，将触发此事件，因此无需担心像 Alt、Shift、箭头等按键。更重要的是，如果您使用鼠标剪切文本的一部分，该事件也会触发。

var element = document.getElementById('search');

element.addEventListener('input',function(e){

  console.log(element.value);

});

<input id="search" type="text" placeholder="Search" autocomplete="off">

- Jakub Muda

Answer 8

您可以将HTML表单简单地添加到输入字段中，如下所示：

...onkeypress ="return /[a-z .@ 0-9]/i.test(event.key)" required accesskey="4"

您不需要任何函数。此验证仅适用于电子邮件字段。不要使用命名或数字。如果要使用数字，请删除电子邮件正则表达式，如下所示：

...onkeypress ="return /[a-z ]/i.test(event.key)" required accesskey="4"

仅限数字：

...onkeypress ="return /[0-9]/i.test(event.key)" required accesskey="4"

不要忘记为每个输入字段添加自己的值。

<div class="form-group">
   <input type="Email" class="form-control " id="EMAILADDRESS" name="EMAILADDRESS" placeholder="Email Address"   autocomplete="false" onkeypress ="return /[a-z .@ 0-9]/i.test(event.key)" required accesskey="4"/>  
</div>

- Nigus Abate

Answer 9

$('#phone').on('keydown', function(e) {
  let key = e.charCode || e.keyCode || 0;

  // 32 = space - border of visible and non visible characters - allows us to backspace and use arrows etc
  // 127 - delete
  if (key > 32 && (key < 48 || key > 58) && key !== 127) {
    e.preventDefault();
    return false;
  }
});

修改自@user4584103的答案，允许我们删除字符，在输入框中导航并过滤掉每个非数字字符。

- bestestefan

Answer 10

使用正则表达式通过动态处理在JavaScript中接受数字或字母。

为特定控件添加onkeypress事件。

onkeypress="javascript:return isNumber(event)"

function numOnly(evt) {
  evt = evt || window.event;
  var charCode = evt.which || evt.keyCode;
  var charStr = String.fromCharCode(charCode);

  if (/[0-9]/i.test(charStr)) {
    return true;
  } else {
    return false;
  }
}

function Alphanum(evt) {
  evt = evt || window.event;
  var charCode = evt.which || evt.keyCode;
  var charStr = String.fromCharCode(charCode);

  if (/[a-z0-9]/i.test(charStr)) {
    return true;
  } else {
    return false;
  }
}

- Bharat Kumar