如何创建始终填充到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