如何創建一個總是填充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);  //