允许使用 JavaScript 的 AlphaNumeric 和其他符号

Question

我已经使用此代码仅在文本框中允许数字，但是如何使 Charkey 只允许 AlphaNumeric 和其他符号，如-./ （破折号、点、斜线）

这是我的允许数字代码

function NumericKey(evt){
    var charCode = (evt.which) ? evt.which : event.keyCode
    if (charCode > 31 && (charCode < 48 || charCode > 57))
        return false;
    return true;
}

谢谢你

Answer 1

首先， Character Codes和Key Codes是不同的东西，你要找的是Key Codes 。

您可以首先通过在在线表格中查找来检查要允许/禁止的密钥代码，或者在这里： http : //keycode.info/

然后通过使用白名单/黑名单来检查代码：

function NumericKey(evt){
    var allowed = [189, 190, 191]; // corresponds to **. , -**

    var charCode = (evt.which) ? evt.which : event.keyCode
    if (charCode > 31 && (charCode < 48 || charCode > 57))
        return allowed.indexOf(charCode) >= 0;
    return true;
}

这将允许您任意将任何键码列入白名单。

一个更简单的解决方案，因为,.- 的关键代码彼此相邻：

function NumericKey(evt){

    var charCode = (evt.which) ? evt.which : event.keyCode
    if (charCode > 31 && (charCode < 48 || charCode > 57) && !(charCode >= 189 && charCode <= 191))
        return false;
    return true;
}

Answer 2

您不应该监听键盘事件（ keydown / keypress / keyup ）来过滤掉某些字符，因为输入的值也可以通过将文本粘贴或拖放到其中来更新，并且有许多您不应该阻止的异常，例如箭头、删除、转义、全选、复制、粘贴等快捷方式……因此，尝试列出应允许的内容的详尽列表可能不是一个好主意。

此外，这不适用于移动设备，其中大多数键发出相同的值e.key = 'Unidentified' ， e.which== 229和e.keyCode = 229 。

相反，只需侦听input事件并更新输入值，删除所有无效字符，同时保留光标的位置：

 const input = document.getElementById('input'); input.oninput = (e) => { const cursorPosition = input.selectionStart - 1; const hasInvalidCharacters = input.value.match(/[^0-9 -./]/); if (!hasInvalidCharacters) return; // Replace all non-digits: input.value = input.value.replace(/[^0-9 -./]/g, ''); // Keep cursor position: input.setSelectionRange(cursorPosition, cursorPosition); };

 <input id="input" type="text" placeholder="Digits and - . / only" />

在这里，您可以看到类似的答案和示例，该示例的行为稍微复杂一些，仅允许带有一个小数分隔符的数字： https : //stackoverflow.com/a/64084513/3723993

无论如何，如果您仍然想尝试这种方法，请记住e.which和e.keyCode都已弃用，因此应e.key或e.code ，这也使代码更易于理解。 还请记住，一些旧浏览器对某些键使用了一些非标准代码，因此，例如，左通常是'LeftArrow'而右是'RightArrow' ，但在 IE 和 Legacy Edge 上，它们将是'Left'和'Right'代替。

如果您需要检查 KeyboardEvent 的属性值，例如e.key 、 e.code 、 e.which或e.keyCode您可以使用https://keyjs.dev 。 我会尽快添加有关这些跨浏览器不兼容的信息！

免责声明：我是作者。