I found this code through Stack Overflow to restrict users from putting numbers in a textbox, however it only works in Chrome and IE. Anyone know of any cross browser code to do this? Note: we've already added the global attribute and it didn't work at all, this was the only one that fully worked in Chrome and IE.
<input type="text" onkeyup="this.value = this.value.replace(/[^a-z]/, '')" />
You want to catch onkeydown that is when the character gets inserted, not on onkeyup. You should also instead of removing the number, just prevent it from getting inserted with event.preventDefault()
<p>
<input type="text" onkeydown="event.key.match(/\d/) && event.preventDefault()" />
</p>One thing I would recommend is removing the code from the html and putting it in a function so it is reusable like this:
// 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>
queryselector up on caniuse.com, it doesn't have full support on ie 8 but does on ie 9. => has no ie support but is supported on edge
oninputinstead?