一、input只允許輸入數字和冒號
在開發中,我們有時需要讓用戶輸入時間,此時需要使用input元素並限制輸入的字元,比如只允許輸入數字和冒號,代碼如下:
上面的代碼中,pattern屬性使用正則表達式限制了只能輸入數字和冒號。
二、input只准輸入數字
有時候需要讓用戶輸入數字,但是有些用戶可能會誤輸入其他字元。我們可以使用type屬性為number的input元素來限制只能輸入數字,代碼如下:
上面的代碼中,type屬性為number會自動禁止輸入非數字字元。
三、input只允許輸入數字和字母
有些場景需要用戶輸入數字和字母,可以使用pattern屬性限制只允許輸入數字和字母,代碼如下:
上面的代碼中,pattern屬性使用正則表達式限制了只能輸入數字和字母。
四、input只允許輸入數字和一個小數點
有時候需要用戶輸入數字和小數點,但是不能輸入其他內容,可以使用pattern屬性限制只允許輸入數字和一個小數點,代碼如下:
上面的代碼中,pattern屬性中\d+表示至少輸入一個數字,(\.\d{1,2})?表示小數點和小數部分可選,小數部分最多兩位。
五、html只允許輸入數字
在HTML中,可以使用input元素和type屬性為tel來限制只能輸入數字,代碼如下:
上面的代碼中,type屬性為tel會自動禁止輸入非數字字元。
六、input只允許輸入正整數
如果只需要用戶輸入正整數,可以使用type屬性為number並限制最小值為1,代碼如下:
上面的代碼中,min屬性限制最小值為1,所以用戶輸入正整數時,不能小於1。
七、正則表達式只允許輸入數字
使用正則表達式可以對輸入的內容進行更加複雜的限制。如果需要只允許輸入數字,可以使用以下正則表達式:
/^\d*$/
上面的正則表達式中,^\d*$表示只能輸入數字。
八、文本框只允許輸入數字和英文
如果需要文本框只允許輸入數字和英文,可以使用以下代碼:
上面的代碼中,使用了onkeyup事件和value.replace函數,將非數字和非英文字元替換為空。
九、input只允許輸入數字和小數點
有時候需要用戶輸入數字和小數點,但是不能輸入其他內容,可以使用以下代碼:
上面的代碼中,使用了onkeyup事件和value.replace函數,將非數字和非小數點字元替換為空。
原創文章,作者:XOGI,如若轉載,請註明出處:https://www.506064.com/zh-tw/n/136852.html