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

Question

我有两个type="number" <input>元素，我想用它们让人们在移动应用程序中输入时间值的小时和分钟部分。

默认情况下，两个输入元素的值为0 ，因此它们都显示0 。 这导致显示0:0 。 然而，通常的表示是0:00 ，所以我希望第二个输入显示两位数。

此外，如果用户输入的值低于 10，我仍然希望输入显示用0填充的数字。

我可以想象几种使用文本输入字段执行此操作的方法，但这会产生验证问题。 此外，我特别选择了type="number" ，因此当input元素被聚焦时，移动操作系统会弹出数字输入。

Answer 1

您可以将这些代码用于数字键盘：-

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