Question

我通过Stack Overflow发现此代码限制用户将数字放入文本框中，但它仅适用于Chrome和IE。有人知道任何跨浏览器代码来执行此操作吗？注意：我们已经添加了全局属性，但它根本不起作用，这是唯一一个在Chrome和IE中完全有效的内容。

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

Answer 1

您希望捕获插入角色时的onkeydown，而不是onkeyup。您也应该使用event.preventDefault()

来防止插入号码，而不是删除号码

＆＃13;

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

＆＃13;

我建议的一件事是从html中删除代码并将其放入函数中，以便它可以重复使用：

＆＃13;

// 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()
}

＆＃13;

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

＆＃13;

跨浏览器代码以使用Javascript限制用户输入

1 个答案: