只接受输入中的数字和字母

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子句，并告诉用户是否按下了箭头键，输入，删除或退格键，但这是正确的方法吗？我是否缺少一些钥匙？平板电脑，台式机和智能手机的关键代码是否相同？

编辑

，如果我还希望确保用户永远不会输入两个连续的逗号呢？所以它不会接受a,b,,c？

Answer 1

根据MDN，charCode和which都被弃用，他们推荐使用keyboardEvent.key。

有趣的是，您为此问题标记了regex，但我没有明确地在您的问题中看到正则表达式。但是，下面的示例应该足够了。见String.prototype.match约在大多数浏览器原生支持正则表达式的详细信息...

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" />