@TOC
在我們開發(fā)過程中吩谦，難免遇到這樣的需求，需要一個(gè)輸入框膝藕，并且只能輸入數(shù)字式廷，不能輸入其他任何字符，這時(shí)候各種正則校驗(yàn)替換真的是苦不堪言~ 有時(shí)候弄得焦頭爛額還要被嘲諷le se ... 接下來給大家介紹個(gè)神奇的解決方案芭挽，走過路過的朋友滑废，有錢的捧個(gè)錢場，沒錢的捧個(gè)人場袜爪，點(diǎn)個(gè)贊什么的我最喜歡啦蠕趁；廢話說多了，下邊請(qǐng)看:
輸入框input[type=number]
首先為何輸入框input[type=number]能輸入e呢辛馆？ 究竟這個(gè)e是何方神圣俺陋，查閱資料得知，原來e = 2.71828...
解決:
在inpu原生事件中把非數(shù)字的按鍵過濾掉昙篙，具體操作如下:
onKeypress="return (/[\d]/.test(String.fromCharCode(event.keyCode)))"
// 如:
<input v-model="goPage"
onKeypress="return (/[\d]/.test(String.fromCharCode(event.keyCode)))"
:max="9999999" type="number" placeholder="請(qǐng)輸入"></input>
驚不驚喜腊状？意不意外？是不是解決啦 ^ _ ^
作者就是喜歡買一送一苔可！
輸入框有自帶的上下箭頭缴挖，即input[type=number]實(shí)際上為步距輸入框也就是計(jì)數(shù)器..會(huì)有自帶的樣式，順帶下面附上解決方案...
CSS去默認(rèn)樣式
input::-webkit-outer-spin-button,
input::-webkit-inner-spin-button {
-webkit-appearance: none;
}
input[type="number"]{
-moz-appearance: textfield;
}
// vue的scope下
/deep/ input::-webkit-outer-spin-button,
/deep/ input::-webkit-inner-spin-button {
-webkit-appearance: none;
}
/deep/ input[type="number"]{
-moz-appearance: textfield;
}
總結(jié)：沒有什么坑解決不了滴焚辅，如果對(duì)你有幫助映屋，請(qǐng)點(diǎn)個(gè)關(guān)注或者喜歡喔
樓主博客安靜Eno
樓主github
