javascript - 使用 Javascript 限制用户输入的跨浏览器代码

Question

我通过 Stack Overflow 找到了这段代码，用于限制用户在文本框中输入数字，但它仅适用于 Chrome 和 IE。有人知道任何跨浏览器代码可以做到这一点吗？注意:我们已经添加了全局属性，但它根本不起作用，这是唯一在 Chrome 和 IE 中完全起作用的属性。

<input type="text" onkeyup="this.value = this.value.replace(/[^a-z]/, '')" />

Answer 1

您想要捕获 onkeydown，即插入字符的时间，而不是 onkeyup。您还应该使用 event.preventDefault()

防止插入数字，而不是删除该数字

<p>
  <input type="text" onkeydown="event.key.match(/\d/) && event.preventDefault()" />
</p>

我建议的一件事是从 html 中删除代码并将其放入函数中，这样它就可以像这样重用:

// Wait till the dom is loaded
document.addEventListener('DOMContentLoaded', function(e) {
  // Add the event to each input that has `data-type="number"`
  document.querySelectorAll('[data-type=number]').forEach(function(input) {
    // Add the event to the input
    input.addEventListener('keydown', number)
  })
})

function number(event) {
  event.key.match(/\d/) && event.preventDefault()
}

<p>
  <input type="text" data-type="number" />
</p>