如何启用附加键的输入答案

【问题标题】：How to enable input for additional keys如何启用附加键的输入
【发布时间】：2018-12-06 12:03:15
【问题描述】：

我已经复制了这段代码表单here

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


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

它们的目标是只允许在输入字段中输入数字或文本字符。我刚刚发现这也排除了像del 和backspace 这样的功能键。我如何在此处添加它们？

【问题讨论】：

标签： javascript html

【解决方案1】：

您需要您想要排除/包含的键的字符代码。一个检查正确的地方是 Wes Bos 的这个网站：http://keycode.info/

【讨论】：

不错的网站，您可能还喜欢keyjs.dev，它提供了有关不同事件和属性的更多信息。 ?

【解决方案2】：

delete 和 backspace 的键码分别是 46 和 8。所以你可以创建和修改现有的函数

function allowDelBack(evt){
    var charCode = (evt.which) ? evt.which : evt.keyCode;
    if (charCode === 46 || charCode ===8)
        return false;
    return true;
}

【讨论】：

【解决方案3】：

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

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

const inputDigits = document.getElementById('inputDigits');
const inputNoDigits = document.getElementById('inputNoDigits');

inputDigits.oninput = (e) => {  
  const cursorPosition = inputDigits.selectionStart - 1;
  const hasInvalidCharacters = inputDigits.value.match(/\D/);

  if (!hasInvalidCharacters) return;
  
  // Replace all non-digits:
  // See https://www.w3schools.com/jsref/jsref_regexp_digit_non.asp
  inputDigits.value = inputDigits.value.replace(/\D/g, '');
  
  // Keep cursor position:
  inputDigits.setSelectionRange(cursorPosition, cursorPosition);
};

inputNoDigits.oninput = (e) => {  
  const cursorPosition = inputNoDigits.selectionStart - 1;
  const hasInvalidCharacters = inputDigits.value.match(/\d/);

  if (!hasInvalidCharacters) return;

  // Replace all digits:
  // See http://w3schools-fa.ir/jsref/jsref_regexp_digit.html
  inputNoDigits.value = inputNoDigits.value.replace(/\d/g, '');
  
  // Keep cursor position:
  inputNoDigits.setSelectionRange(cursorPosition, cursorPosition);
};

<input id="inputDigits" type="text" placeholder="Digits only" />
<input id="inputNoDigits" type="text" placeholder="Anything but digits" />

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

【讨论】：