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

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

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

注意：此方法使用type="text"，因此请务必在需要时转换回数字。 Number(formattedHours);

Answer 3

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

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

3 个答案: