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

CodePudding user response：

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

CodePudding user response：

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

CodePudding user response：

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

CodePudding user response：

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

CodePudding user response：

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

CodePudding user response：

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