HTML输入类型数字，带前导零的输入

Question

我有一个HTML输入类型为Number，maxlength ='6'，我希望在输入某些数字时它具有前导零。前导零会根据您的数字输入自动调整。

例如：在字段中输入“12”时，它应该添加前导零，使其变为“000012”，或者输入“123”，它应该是“000123”，以此类推。

如何使用JS / JQuery实现此目标？

谢谢您的帮助。

- Jorz

Answer 1

由于我无法评论，我会在回答中添加一个观点：
最好只监听 input 事件。这样更流畅，并且可以触发粘贴/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">

- science fun

Answer 2

类似这样的内容：

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

为了支持负数值：

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

注意： 虽然这个答案是正确的，但为了更加顺畅的改变，请查看@science fun提供的附加答案，使用addEventListener。 编辑：应用addEventListener。

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

- Rio A.P

---

你可能也想监听 change 事件，因为右键点击和粘贴不会触发你的函数。 - WOUNDEDStevenJones

谢谢Rio！正是我需要的。@WOUNDEDStevenJones 也提出了很好的观点，感谢！ - Jorz