I have a number input: <input type = 'number>, and I needed to know how to limit the amount of integers that you could insert into the input
So I came up with what's in the snippet, but are there any other solutions that may be faster to implement, or just better in general.
This question has a similar answer, but I am trying to scour the internet to see if there is a better answer to it.
EDIT: I have found the answer that works to it, and I am looking for something of a one liner that would work. Something like the max = '4' or the input's version of it maxlength = '4'
const Input = document.getElementById('input')
function limitDigits(element, amount) {
element.addEventListener('input', () => {
if (element.value.length > amount) {
element.value = Math.floor(element.value/10)
}
})
}
limitDigits(Input, 4)input[type="number"]::-webkit-outer-spin-button,
input[type="number"]::-webkit-inner-spin-button {
-webkit-appearance: none;
margin: 0;
}
#input {
width:30px;
}<input id = 'input' type = 'number'>The only thing more efficient (especially if you are using this functionality more than once) would be to make it more reusable - that way you don't have to instantiate it each time through code.
document.addEventListener('DOMContentLoaded', () => {
document.querySelectorAll('[maxlength]').forEach(input => {
input.addEventListener('input', e => {
let val = e.target.value, len = +e.target.getAttribute('maxlength');
e.target.value = val.slice(0,len);
})
})
})input[type="number"]::-webkit-outer-spin-button,
input[type="number"]::-webkit-inner-spin-button {
-webkit-appearance: none;
margin: 0;
}
#input {
width: 30px;
}<input maxlength='4' type='number'>You can use the maxlength attribute to do this:
<input id='input' type='text' maxlength='10'>Unfortunately, this does not work on input of type number. A workaround can be found here: maxlength ignored for input type="number" in Chrome
A good place to learn about HTML is MDN, which has a dedicated page for <input type="number">.
The list of attributes includes:
max
The maximum value to accept for this input.
Note that a number field is designed to represent an actual numeric value, not a string which happens to be made up of digits. So rather than "less than 4 digits long", you need to say "a value less than or equal to nine thousand, nine hundred and ninety-nine":
<input id='input' type='number' max='9999'>