javascript - HTML Input Type Number with Leading Zero on Input - Stack Overflow

admin管理员组

文章数量:1296456

I have HTML Input Type=Number with maxlength='6' and I want it to have leading zeros while typing certain numbers. Leading zeros automatically adjusts depending on your number input.

Example: While typing '12' in the field, it should add leading zeros making it '000012' instead, or typing '123', it should be '000123', and so on.

How can I achieve this using JS/JQuery?

Thank you for helping.

I have HTML Input Type=Number with maxlength='6' and I want it to have leading zeros while typing certain numbers. Leading zeros automatically adjusts depending on your number input.

Example: While typing '12' in the field, it should add leading zeros making it '000012' instead, or typing '123', it should be '000123', and so on.

How can I achieve this using JS/JQuery?

Thank you for helping.

• javascript
• html
• leading-zero

Share Improve this question Follow edited Apr 1, 2023 at 19:24 Rio A.P 1,3951414 silver badges2323 bronze badges asked Jul 5, 2022 at 3:34 JorzJorz 35877 silver badges2222 bronze badges

Add a ment  | 

2 Answers 2

Sorted by: Reset to default 5

Since I cannot ment, I will add one point as an answer:
It's better to just listen for input events. It's smoother and will trigger on pasting/ctrl+V.

The credit of this answer goes to Rio A.P

function addLeadingZero(event) {

    // get maxlength attr
    const maxLength = parseInt(event.target.getAttribute("maxlength"))
    // check and flag if negative
    const isNegative = parseInt(event.target.value) < 0
    // "0".repeat(maxLength) <-- create default pad with maxlength given
    // Math.abs(event.target.value) to make sure we proceed with positive value
    // append zero and slice last of attr maxlength value
    let newValue = ("0".repeat(maxLength) + Math.abs(event.target.value).toString()).slice(-maxLength);
    // add - if flag negative is true
    if (isNegative) {
      newValue = "-"+newValue
    }
    // change the value of input
    event.target.value = newValue
}

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

<input type="number" maxlength="6">

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

To support negative value :

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

function addLeadingZero(event) {
    // get maxlength attr
    const maxLength = parseInt(event.target.getAttribute("maxlength"))
    // check and flag if negative
    const isNegative = parseInt(event.target.value) < 0
    // "0".repeat(maxLength) <-- create default pad with maxlength given
    // Math.abs(event.target.value) to make sure we proceed with positive value
    // append zero and slice last of attr maxlength value
    let newValue = ("0".repeat(maxLength) + Math.abs(event.target.value).toString()).slice(-maxLength);
    // add - if flag negative is true
    if (isNegative) {
      newValue = "-"+newValue
    }
    // 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">

Note : while this answer is correct for more smoother change please check additional answer given by @science fun for using addEventListener.

edit: applied addEventListener.

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

本文标签： javascriptHTML Input Type Number with Leading Zero on InputStack Overflow