Vue限制輸入框只能輸入整數

2022-05-01 08:57:10 字數 544 閱讀 9629

首先,得明確監聽input輸入框變化的方法是input,不是change。

方案一:type= "number"

作用:成功禁止輸入字母

能輸入小數點,第一位可以為0,小數點能輸入多個

eg:01111.5.5

方案二:v-model.number

作用:輸入過程中能輸入字母,但在失去焦點時多餘的字母會被清除,且錯誤的字母不會計入值

輸入過程中能輸入小數,例如:12.3

多個錯誤格式的小數會被清除:例如:12.3.5在失去焦點後會變成12.3

第一位可以輸入0,但若之後繼續輸入會被清除,例如:01 失去焦點後會變成1

方案三:合二為一

作用:成功禁止輸入字母

能輸入蹩腳的小數,失去焦點不會清除但不會計入 eg:1.2.3能輸入但計入的是1.2

第一位可以輸入0,但若之後繼續輸入會被清除,例如:01 失去焦點後會變成1

可見官網推薦的v-model.number+ type="number"方法對於輸入數字的需求基本滿足,但對或正整數、整數等的需求,還是得我們自己處理

vue中input輸入框,限制只能輸入小數點後倆位

vue中input輸入框,限制只能輸入小數點後倆位 考慮到了 的復用。在input中,設定輸入整數很簡單 return d test string.fromcharcode event.keycode v model editform.tbiddingsku auto complete off el...

限制 input 輸入框只能輸入數字

1 onkeyup value value.replace d g,使用 onkeyup 事件,有 bug 那就是在中文輸入法狀態下,輸入漢字之後直接回車,會直接輸入字母 2 onchange value value.replace d g,使用 onchange 事件,在輸入內容後,只有 inpu...

限制input輸入框只能輸入數字

1 onkeyup value value.replace d g,使用 onkeyup 事件,有 bug 那就是在中文輸入法狀態下,輸入漢字之後直接回車,會直接輸入字母 2 onchange value value.replace d g,使用 onchange 事件,在輸入內容後,只有 inpu...