使用JavaScript

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

首先，logging.getLogger().setLevel(logging.DEBUG)和Character Codes是不同的，你要找的是Key Codes。

您可以先在在线表格中查看要允许/禁止的密钥代码，或在此处查看：http://keycode.info/

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

Key Codes

这将允许您任意将任何密钥代码列入白名单。

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

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;
}

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上，它们通常为{{ 1}}和'Left'。

如果需要检查KeyboardEvent的属性值，例如'Right'，e.key，e.code或e.which，则可以使用https://keyjs.dev。我将很快添加有关此类跨浏览器不兼容性的信息！

免责声明：我是作者。