方法一:
通過設置type屬性:type=“number”,這種方式一般會影響樣式,不建議使用,如下圖:
<el-input type="number" v-model="aaa"></el-input>
方法二:
通過綁定值限制的方式:v-model.number=“aaa”,這種方式會限制一般的數字,但是會影響maxlengt屬性,并且e是可以輸入的,一般情況可以使用,嚴格限制的話不建議使用
<el-input v-model.number="aaa"></el-input>
方法三:(建議使用)
通過對value值進行正則限制:οnkeyup=“value=value.replace(/[^\d]/g,’ ')”,綁定一個onkeyup監聽事件,/[^\d]/g 是用來匹配所有非數字內容的正則表達式,將之替換成空字符串,這種方式不會影響任何屬性,推薦使用
<el-input v-model="aaa" οnkeyup="value=value.replace(/[^\d]/g,'')"></el-input>
只允許輸入數字(整數:小數點不能輸入)
<input type="text" onkeyup="value=value.replace(/[^\d]/g,'')" >
允許輸入小數(兩位小數)
<input type="text" onkeyup="value=value.replace(/^\D (\d (?:.\d{0,2})?). 1')" >
允許輸入小數(一位小數)
<input type="text" onkeyup="value=value.replace(/^\D (\d (?:.\d{0,1})?). 1')" >
開頭不能為0,且不能輸入小數
<input type="text" onkeyup="value=value.replace(/[ \d]/g,'').replace(/ 0{1,}/g,'')" >
終極方法
onkeypress="return( /[\d]/.test(String.fromCharCode(event.keyCode) ) )"
本文收集與https://zhuanlan.zhihu.com/p/653873229 只作為快速查詢使用