How to pattern html5 input

Question

I have input like this

<input max="100" min="0" type="number">

But in this input users can put numbers like 01 02 03 004 itp... And my question is how to prevent this? To only numbers from 0 to 100

0, 1, 2, 3 ... 100

developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/… — Mister Jojo
– Mister Jojo, Commented Jun 21, 2019 at 14:10
Possible duplicate of Remove leading zeros from input type=number — Mathias
– Mathias, Commented Jun 21, 2019 at 14:46

Victor · Accepted Answer · 2019-06-21 14:37:15Z

1

In most cases JavaScript is the answer:

<input type="text" id="taskinput">
<script>
    const input = document.getElementById('taskinput');

    let lastValue = '';

    input.oninput = () => {
        if (!input.value) {
            lastValue = '';
            return;
        }

        const val = parseInt(input.value);

        if (val > 100 || isNaN(val)) {
            input.value = lastValue;
            return;
        }

        lastValue = val;
        input.value = lastValue;
    }
</script>

answered Jun 21, 2019 at 14:37

Victor

4474 silver badges14 bronze badges

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

Comments

Dontwan · Accepted Answer · 2019-06-21 14:29:41Z

0

You could archive this by adding a onchange eventlistener on the input.

The regex will remove the leading zero.

document.getElementById('number').onchange = function(){
	this.value = this.value.replace(/\b0+[0-9]/g, '');
};

<input id="number" min="0" max="100" step="1" type="number" >

edited Jun 21, 2019 at 14:29

answered Jun 21, 2019 at 14:18

Dontwan

1217 bronze badges

Collectives™ on Stack Overflow

How to pattern html5 input

2 Answers 2

Comments

Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related