如何在小於 10 的數字前插入零？ HTML 輸入框

Question

我創建了一個 html 輸入框，我希望一個人最多可以輸入 2 個字符的數字（因此從 01 到 99），如果數字小於 10，則該框必須自行添加零。

有2個問題：

1. 如果我輸入00 ，腳本會寫000 ； 如果我寫01腳本寫001等。
2. 盒子接受超過 99 的數字

代碼：

<input type="number" class="form-control" name="amount_centesimi" min="0" max="99" value="00" onchange="if(parseInt(this.value,10)<10)this.value='0'+this.value;" required>

Answer 1

嘗試這個。

<input type="number" class="form-control" name="amount_centesimi" min="0" max="99" value="00" onchange="this.value=(parseInt(this.value)<10)?('0'+parseInt(this.value)):parseInt(this.value)" style="width: 100px" required>

您的代碼中有兩個問題：

if (parseInt(this.value,10) < 10) this.value= '0' + this.value;

1 將值分配給this.value時，您錯過了對其進行清理。

你寫的代碼this.value = '0' + this.value;

因此，如果您的輸入值為'01' ，則 js 使用原始字符串值並將其'001' ( '0' + '01' )

您必須像這樣清理值：

this.value = '0' + parseInt(this.value)

2 即使輸入數字大於 10，您也必須更改該值

或者，如果您輸入類似 '000999' 的值，它不會更改為 '999'

Answer 2

我會使用padStart ：

<input 
   type="number"
   class="form-control"
   name="amount_centesimi"
   min="0"
   max="99"
   value="00"
   onchange="this.value = this.value.padStart(2, '0')"
   required />

Answer 3

不確定我是否做得對，但是當我使用onChange它沒有立即更新值，所以我使用了onInput 。

由於我想不出一種方法來跟蹤以前的值，如果您繼續輸入數字，它會翻轉。

• 輸入 0 - 得到 00
• 類型 1 - 得到 01
• 類型 1 - 得到 11
• 類型 2 - 得到 12
• 類型 3 - 得到 23

 <input min="0" max="99" value="00" type="number" oninput="(function(e) { let value = e.value.replace(/\\D/g,''); if (parseInt(value, 10) < 10) { value = '0' + value; } e.value = value.substr(-2); })(this);" />