javascript - 带有持续时间步数计数器的文本框，格式为 HHHH :MM:DD format

Question

这个问题是关于寻求建议。我需要一个可以接受或设置 HHHH:MM:SS 持续时间(不是 12 或 24 小时时间)的文本框

示例:23518 小时:59 分钟:01 秒23518:59:01我需要使用步计数器根据当前光标增加或减少值。

我搜索了插件，但没有找到适合此用例的插件。

非常感谢任何指针。

Answer 1

你需要自己动手 - 像这样

const pad = (num) => ("0"+num).slice(-2)
document.querySelectorAll(".pad").forEach(
  ele => ele.addEventListener("change",e => 
    e.target.value = pad(e.target.value)
  )  
)
document.getElementById("hours").addEventListener("change",e => {
  let tgt = e.target;
  let val = tgt.value;
  if (val.length<3) {
    val=pad(val)
    tgt.value=val;
  }  
})  

input[type=number] {
  text-align:right;
}

<input id="hours" type="number" min="0" max="99999" value="00"/>:<input id="min" class="pad" type="number" pattern="[0-9]*" min="01" max="59" value="00" />:<input id="sec" class="pad" type="number" pattern="[0-9]*" min="01" max="59" value="00" />