javascript - 允许基于正则表达式或字符串的键盘输入

Question

我正在尝试为 keydown 事件添加 allow 函数。应该发生的情况是，您可以向它传递您想要允许插入输入字段的 RegExp 或 string 键盘按键，然后执行其他操作被拒绝。

我遇到的问题与其他有关。拥有它会阻塞每个输入。删除 else 可以使 RegExp 工作，但字符串不起作用。

这是什么原因造成的？

function allow(evt, ...names) {
  for (let i = 0; i < names.length; i++) {
    let name = names[i]
    if (name instanceof RegExp) {
      if (!name.test(evt.key)) {
        evt && evt.preventDefault()
      }
    } else {
      name = name.toString()
      if (name.toLowerCase() != evt.key.toLowerCase()) {
        evt && evt.preventDefault()
      }
    }
  }
}

document.querySelector('input').addEventListener('keydown', e => {
  allow(e, /\d/, 'Backspace')
})

<input type="text">

Answer 1

我猜您正在尝试限制用户在输入框中键入内容。在示例中，您只需要用户输入数字或退格键。

您的案例的问题是您的两个条件都会触发。如果用户键入，例如键盘上的数字 1，如果条件评估，这很好，但是您将循环到 Backspace(第二个名称)，这在小写条件下失败。

尝试这样的事情:

const allow = (evt, ...names) => {
  const keys = names.filter(n => n.constructor !== RegExp)
  const regexs = names.filter(n => n.constructor === RegExp)
  const isInKeys = keys.filter(k => k.toLowerCase() === evt.key.toLowerCase())
  if (isInKeys.length === 0) {
    regexs.forEach(regex => {
      if (!regex.test(evt.key)) {
        evt && evt.preventDefault()
      }
    })
  }
}

您检查用户是否按下了您允许的键，然后不需要执行任何操作，否则将它们传递给所有正则表达式。

HTH