如何创建一个总是填充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);  //