HTML input type "number" to have same behavior as input type "text" for maxlength

Question

I'm using in a form an input of type number, like this:

<input class="form-control" id="Parti_NEstudante" name="Parti_NEstudante" type="number" min="0" max="9999999999" step="1" oninput="(validity.valid)||(value='');">

When i insert the value if i introduce more than 10 digits all the input is erased, due to the max i implemented..

My question is, instead of erasing my input, is it possible to just block more digits? just like the behavior of "maxlength" of input type "text".

stackoverflow.com/questions/18510845/… Chrome is just behaving correctly. you can add Jquery to save the result though. — Josh Adams
– Josh Adams, Commented Feb 2, 2018 at 18:14
if you make the first attempt and post it, I can help you finish it up. Cheers. — Josh Adams
– Josh Adams, Commented Feb 2, 2018 at 18:27

Piotr Świnarski · Accepted Answer · 2018-02-02 18:29:49Z

1

You can achieve this by this way.

<input id="Parti_NEstudante" type="number" min="0" max="9999999999">

<script>
    var input = document.getElementById("Parti_NEstudante");

    input.addEventListener("input", function() {
        if (this.value.length > this.max.length) {
            this.value = this.value.slice(0, this.max.length)
        }
    });
</script>

answered Feb 2, 2018 at 18:29

Piotr Świnarski

264 bronze badges

Sign up to request clarification or add additional context in comments.

4 Comments

cesarPR Over a year ago

Thanks for the answer, although that didn't work. See this jsfiddle, i tested what you said. jsfiddle.net/t656N/2686

Piotr Świnarski Over a year ago

If you paste whole code to HTML window, it works. jsfiddle.net/psL9tLg5/…

cesarPR Over a year ago

Like this? jsfiddle.net/t656N/2687 Still doesn't. I tried on my code, also doesn't work

cesarPR Over a year ago

Ohh, the problem was my "oninput" definition. Thanks so much. Works exactly like i wanted.

Collectives™ on Stack Overflow

HTML input type "number" to have same behavior as input type "text" for maxlength

1 Answer 1

4 Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

4 Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related