@TOC

在我們開發(fā)過程中，難免遇到這樣的需求，需要一個輸入框，并且只能輸入數(shù)字，不能輸入其他任何字符，這時候各種正則校驗替換真的是苦不堪言~ 有時候弄得焦頭爛額還要被嘲諷le se ... 接下來給大家介紹個神奇的解決方案，走過路過的朋友，有錢的捧個錢場，沒錢的捧個人場，點個贊什么的我最喜歡啦；廢話說多了，下邊請看:

輸入框input[type=number]

首先為何輸入框input[type=number]能輸入e呢？ 究竟這個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="請輸入"></input>
        

驚不驚喜？意不意外？是不是解決啦 ^ _ ^

作者就是喜歡買一送一！
輸入框有自帶的上下箭頭，即input[type=number]實際上為步距輸入框也就是計數(shù)器..會有自帶的樣式，順帶下面附上解決方案...

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é)：沒有什么坑解決不了滴，如果對你有幫助，請點個關(guān)注或者喜歡喔

樓主博客安靜Eno

樓主github