Limit the amount of digits allowed in a Number Input javascript

Question

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.

Similar Question

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'>

Answer 1

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'>

Answer 2

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

Answer 3

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'>

Answer 4

Solution given by HTML5, add attribute of min and max and uou good to go.

Answer 5

I found a way to do this though the use of a module

HTMLElement.prototype.limitDigits = function (max) {
    this.addEventListener('input', () => {
        if (this.value.length > max) {
            this.value = Math.floor(this.value/10)
        }
    })
}

 HTMLElement.prototype.limitDigits = function (max) { this.addEventListener('input', () => { if (this.value.length > max) { this.value = Math.floor(this.value/10) } }) } //Element.limitDigits(maxLength) const Input = document.getElementById('input'); const InputTwo = document.getElementById('input2'); Input.limitDigits(4); InputTwo.limitDigits(1);

 input[type="number"]::-webkit-outer-spin-button, input[type="number"]::-webkit-inner-spin-button { -webkit-appearance: none; margin: 0; } input { width: 30px; }

 Default: <input type = 'number'> <br><br> Limit is set to 4 Digits: <input id = 'input' type = 'number'> <br> <br> Litmit is set to 1 Digit:<input id = 'input2' type = 'number'>

Answer 6

This should get you there

 function limit(element){ var max_num = 4; if(element.value.length > max_num) { element.value = element.value.substr(0, max_chars); } }

 <input type="number" onkeydown="limit(this);" onkeyup="limit(this);">