在输入数字字段上显示前导零

Question

我有两个代表小时和分钟的input字段。

 <input type="number" min="0" max="24" step="1" value="00" class="hours"> <input type="number" min="0" max="0.60" step="0.01" value="00" class="minutes">

显示为：

0:0

或者：

5:3

有没有办法将其显示为：

00:00

或者：

05:03

即 24 小时数据格式（在人们建议之前，我不能使用 type="time"）。

Answer 1

您可以在输入标签中添加onchange属性，该属性调用javascript函数。

    <script>
       function MyFunction() {
           var minuteValue = document.getElementById("minutes").value;
           if (minuteValue.length < 2) {
               minuteValue = "0" + minuteValue;
           }
           alert(minuteValue);
       }
    </script>

    <input id="minutes" onchange="MyFunction()"/>

Answer 2

使用JavaScript函数添加前导零。

 const hours = document.getElementById("hours"); const minutes = document.getElementById("minutes"); function addLeadingZero(value) { return value.length < 2 ? "0" + value : value; } hours.addEventListener("input", function() { hours.value = addLeadingZero(hours.value); }); minutes.addEventListener("input", function() { minutes.value = addLeadingZero(minutes.value); }); 

 <input type="number" min="0" max="24" value="00" id="hours" class="hours"> <input type="number" min="0" max="59" value="00" id="minutes" class="minutes"> 

Answer 3

 function formatNums(num){
   if (nums < 10){
     return "0" + num;
   }
 }

 var formattedHours = formatNums(hours);
 var formattedMinutes = formatNums(minutes);

---

注意：此方法使用type="text"因此如果需要，请确保转换回数字。 Number(formattedHours);

Answer 4

简单是最好的

`${number}`.padStart(2, '0')