HTML5 Input Type=Number Removes Leading Zero

Remove leading zeros from input type=number

just use a regular expression like this

textboxText= textboxText.replace(/^0+/, '')

HTML Input Type Number with Leading Zero on Input

something like this:

document.querySelector("input[type=number]").addEventListener('input', addLeadingZero)

function addLeadingZero(event) {
    // get maxlength attr
    const maxLength = parseInt(event.target.getAttribute("maxlength"))
    // "0".repeat(maxLength) <-- create default pad with maxlength given
    // append zero and slice last of attr maxlength value
    const newValue = ("0".repeat(maxLength) + event.target.value.toString()).slice(-maxLength);
    // change the value of input
    event.target.value = newValue
}

<!-- @event onkeyup to make sure function run on every key up -->
<!-- @event onchange to make sure function run when we click on arrow up/down -->
<input type="number" maxlength="6">

Force leading zero in number input

I'm afraid there is not native HTML way to do that unless using a Select tag. If you are using a text input you have to add the leading 0 on the 10 first values by javascript.

Input type='number' new validation removes leading zeros and formats number in Safari for iPhone iOS5 and latest Safari for Mac

I change type="number" to type="tel" and works fine. I did some quick testing and have not found any validation or auto-formatting of the text either.

Can I pad number with zeros in HTML <input type=number />?

According to the HTML5 definitions there is no option for specifying a format for the number. Nowadays latest browsers do not treat the number input the same anyway (see "Known issues" at https://caniuse.com/#feat=input-number).

I fear the only option to force a given pattern in the input involves JavaScript.

Sources: https://developer.mozilla.org/en-US/docs/Web/HTML/Element/input/number, https://www.w3.org/TR/html5/sec-forms.html#number-state-typenumber, https://www.w3.org/TR/html5/infrastructure.html#valid-floating-point-number

---

Related Topics