如何创建始终填充为 2 位的数字输入？

Question

I have two type="number" <input> elements, which I want to use to let people enter the hours and minutes parts of a time value in a mobile application.

By default, the two input element's value is 0 , so they both show 0 . This results in a display of 0:0 . The usual representation however would be 0:00 , so I would want the second input to show double digits.

Also, if the user enters a value below 10, I would still want the input to show the number padded with a 0 .

I could imagine a couple of ways to do this with a text input field, but that would create the problem of validation. Also, I picked type="number" specifically, so the mobile OS will pop open the numeric input when the input element is focused.

Answer 1

You can use these code for number pad :-

function pad(n, width, z)
{
     z = z || '0';
     n = n + '';
     return n.length >= width ? n : new Array(width - n.length + 1).join(z) + n;
}

pad(10, 4);      // 0010
pad(9, 4);       // 0009
pad(123, 4);     // 0123