input只允許輸入數字

在開發中，我們有時需要讓用戶輸入時間，此時需要使用input元素並限制輸入的字符，比如只允許輸入數字和冒號，代碼如下：

上面的代碼中，pattern屬性使用正則表達式限制了只能輸入數字和冒號。

有時候需要讓用戶輸入數字，但是有些用戶可能會誤輸入其他字符。我們可以使用type屬性為number的input元素來限制只能輸入數字，代碼如下：

上面的代碼中，type屬性為number會自動禁止輸入非數字字符。

有些場景需要用戶輸入數字和字母，可以使用pattern屬性限制只允許輸入數字和字母，代碼如下：

上面的代碼中，pattern屬性使用正則表達式限制了只能輸入數字和字母。

有時候需要用戶輸入數字和小數點，但是不能輸入其他內容，可以使用pattern屬性限制只允許輸入數字和一個小數點，代碼如下：

上面的代碼中，pattern屬性中\d+表示至少輸入一個數字，(\.\d{1,2})?表示小數點和小數部分可選，小數部分最多兩位。

在HTML中，可以使用input元素和type屬性為tel來限制只能輸入數字，代碼如下：

上面的代碼中，type屬性為tel會自動禁止輸入非數字字符。

如果只需要用戶輸入正整數，可以使用type屬性為number並限制最小值為1，代碼如下：

上面的代碼中，min屬性限制最小值為1，所以用戶輸入正整數時，不能小於1。

使用正則表達式可以對輸入的內容進行更加複雜的限制。如果需要只允許輸入數字，可以使用以下正則表達式：

/^\d*$/

上面的正則表達式中，^\d*$表示只能輸入數字。

如果需要文本框只允許輸入數字和英文，可以使用以下代碼：

上面的代碼中，使用了onkeyup事件和value.replace函數，將非數字和非英文字符替換為空。

有時候需要用戶輸入數字和小數點，但是不能輸入其他內容，可以使用以下代碼：

上面的代碼中，使用了onkeyup事件和value.replace函數，將非數字和非小數點字符替換為空。

原創文章，作者：XOGI，如若轉載，請註明出處：https://www.506064.com/zh-hant/n/136852.html