javascript - 只接受输入的数字和字母

Question

我只想在输入中接受字母、数字和逗号。

我已经尝试过

document.getElementById('input').onkeydown = function (e) {
  const charCode = (typeof e.which === 'number') ? e.which : e.keyCode;
  return (charCode >= 48 && charCode <= 57) || // numbers
         (charCode >= 65 && charCode <= 90) || // letters
         charCode === 188                      // comma
};

它可以工作，但它也拒绝使用箭头键、回车键、删除键和退格键(以及可能的其他重要键)。

我可以添加另一个 or 子句并判断用户是否按下了方向键、回车键、删除键或退格键，但这是正确的方法吗？我是否缺少一些 key ？平板电脑、台式机和智能手机上的 key 代码是否相同？

编辑

如果我还想确保用户永远不会输入两个连续的逗号怎么办？所以它不会接受a,b,,c？

Answer 1

根据 MDN，charCode和which两者均已弃用，建议使用 keyboardEvent.key 。

有趣的是，您为这个问题标记了regex，但我没有在您的问题中明确看到正则表达式。但是，下面的示例应该足够了。请参阅String.prototype.match有关大多数浏览器中 native 正则表达式支持的更多信息...

document.getElementById('input').onkeydown = function (e) {
  var value =  e.target.value;
  //only allow a-z, A-Z, digits 0-9 and comma, with only 1 consecutive comma ...
  if (!e.key.match(/[a-zA-Z0-9,]/) || (e.key == ',' && value[value.length-1] == ',')) {
    e.preventDefault();  
  }
};

Type Value: <input id="input" type="text" />

您还可以使用character classes - 例如\d 和 \w，尽管 \w 包含下划线字符 (_):

document.getElementById('input').onkeydown = function (e) {
  var value =  e.target.value;
  //only allow a-z, A-Z, digits 0-9 and comma, with only 1 consecutive comma ...
  if (e.key.match(/_/) || !e.key.match(/[\w\d,]/) || (e.key == ',' && value[value.length-1] == ',')) {
    e.preventDefault();  
  }
};

Type Value: <input id="input" type="text" />