带有 HHHH:MM:DD 格式的持续时间计步器的文本框

Question

本题求教。我需要一个可以接受或设置 HHHH:MM:SS 持续时间（不是 12 或 24 小时时间）

的文本框

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

我搜索了插件，但 none 找到了这个用例。

非常感谢任何指点。

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

带有 HHHH:MM:DD 格式的持续时间计步器的文本框

Textbox with duration step counter in HHHH:MM:DD format

javascript

jquery

input

textbox

duration