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

Does this answer your question? [How can I limit possible inputs in a HTML5 "number" element?](https://stackoverflow.com/questions/8354975/how-can-i-limit-possible-inputs-in-a-html5-number-element) — Kinglish, Jan 21 '22 at 18:01
@Kinglish The problem with that is you can still manually input numbers set over that max, its just when you use the slider. — Zain Wilson - WCH Student, Jan 21 '22 at 18:02
there was also some `oninput` event javascript in that post that showed how to check and trim input that is too large. — Kinglish, Jan 21 '22 at 18:04
Yes, and that was very similar to what I have, I was wondering if there was a better solution to the problem — Zain Wilson - WCH Student, Jan 21 '22 at 18:05

score 2 · Accepted Answer · answered Jan 21 '22 at 18:20

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

Thank you, that is very nice. I was thinking of closing this question since everyone was linking me to one that was very different. — Zain Wilson - WCH Student, Jan 21 '22 at 18:23

score 0 · Answer 2 · edited Jan 21 '22 at 18:13

0

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

edited Jan 21 '22 at 18:13

HoldOffHunger

18,769
10
104
133

answered Jan 21 '22 at 18:00

Felix G

724
5
17

2

That doesn't work for `type='number'` inputs – Zain Wilson - WCH Student Jan 21 '22 at 18:02
Comment on your edit, for some reason the `pattern` element does not work for me, and although I could include a similar answer with regex, I just want to limit the amount of numbers in specifically a `` – Zain Wilson - WCH Student Jan 21 '22 at 18:11
In that case, I guess going with an oninput event would be best. Check out the second answer on the linked questions. Pretty similar to what you already had but a bit more concise. – Felix G Jan 21 '22 at 18:14
Do you think that I should close my question then? – Zain Wilson - WCH Student Jan 21 '22 at 18:18

score 0 · Answer 3 · edited Jan 21 '22 at 18:12

0

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

edited Jan 21 '22 at 18:12

HoldOffHunger

18,769
10
104
133

answered Jan 21 '22 at 18:02

IMSoP

89,526
13
117
169

Although this solution works, the biggest problem is that the `max` value only accepts it with the side arrows, but when you manually input it, it goes over the value – Zain Wilson - WCH Student Jan 21 '22 at 18:04
@ZainWilson-WCHStudent It will also fail [constraint validation](https://developer.mozilla.org/en-US/docs/Web/Guide/HTML/Constraint_validation) when you try to submit the form. – IMSoP Jan 21 '22 at 18:07
The problem is is that it is not included in a form, I just need a number input – Zain Wilson - WCH Student Jan 21 '22 at 18:09
@ZainWilson-WCHStudent You could trigger the validation manually on some other event. Or you could stick with your custom solution, since you're not really using it in the way the spec intended anyway. – IMSoP Jan 21 '22 at 18:10
Do you believe that I should close my question then? – Zain Wilson - WCH Student Jan 21 '22 at 18:16

score 0 · Answer 4 · answered Jan 21 '22 at 18:18

0

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

answered Jan 21 '22 at 18:18

Mirza Irtiza

154
7

Sorry, but in chrome the min max value do not prevent you from being able to input a higher value that what you set. – Zain Wilson - WCH Student Jan 21 '22 at 18:19

score 0 · Answer 5 · answered Jan 21 '22 at 18:47

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

score -2 · Answer 6 · edited Jan 21 '22 at 18:13

-2

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);">

edited Jan 21 '22 at 18:13

HoldOffHunger

18,769
10
104
133

answered Jan 21 '22 at 18:12

Eric Anderson

11
5

Yes, that is my exact snippet thank you though. – Zain Wilson - WCH Student Jan 21 '22 at 18:13

Limit the amount of digits allowed in a Number Input javascript

6 Answers6