h5 調起數字鍵盤的坑
爲了限制只能輸入數字，不能輸入小數點、加減號，走了敲多的彎路~~（查各種資料，然後各種測試）
現下來看看筆記：
HTML5加入了新的input類型 number，這是方便數量輸入的。如果是在移動端中，屬性type=”number”和type=”tel”會喚起系統的數字鍵盤，這對於交互還是挺友好的。
一、 type="number"時
1、只允許輸入數字，（兼容ios、安卓，但顯示鍵盤不一樣）
<input type="number">
ios圖：
2、只允許輸入數字和小數點，（兼容ios、安卓，但顯示鍵盤不一樣）
<input type="number" pattern="[0-9]*" >
<input type="number" pattern="\d">
對錶單驗證來說，這兩個正則的作用是一樣的，表現的話差異就很大：
iOS中，只有[0-9]*纔可以調起九宮格數字鍵盤，\d 無效
Android 4.4以下(包括X5內核)，兩者都調起數字鍵盤；
Android 4.4.4以上，只認 type 屬性，也就是說，如果上面的代碼將 type=“number” 改爲 type=“text” ，將調起全鍵盤而不會是九宮格數字鍵盤。
ios圖：（ 安卓是有小數點、加減等符號的！）
一、 type="tel"時
可調用（有英文字母的大概）鍵盤，能獲取到輸入的數字以及各種符號 ，能用正則表達式限制輸入內容！！！一般情況下可用這個，不過還是要看個人需求了。
<input type="tel" >
注：問題來了
由於產品要求：只能輸入數字，不要小數點，不能有加減等符號，第一個數字不能爲0，所以只能用：
<input type="number" pattern="[0-9]*" min='0' >
沒錯，因爲ios只彈出0-9數字選擇，但有些手機依舊有小數點、加減等符號的輸入鍵！！！
所以，type="number"時，這數據和視圖不統一的做法，真讓人蛋疼，視圖裏面的小數點顯示了，但是結果卻沒有。當然這在鍵入其他符號的時候處理的更加”勁爆”：
因爲 根本獲取不到小數點，以及加減等符號！想做js判斷都沒得，輸入數字後再輸入加減號後，返回的值直接爲空！
1、小數點：
2、加減號：
所以建議在面對輸入數量，而且要監控每次輸入這樣的需求時，儘量不好使用number的屬性。
要想做到實時的對輸入結果進行監控，type=number比較費勁，而type=tel只需要監控每一次的結果就ok了。
（但事實是要求要用數字鍵盤…試圖判斷了許久不行後，只好手寫一個了，淚崩）
手寫了個移動端鍵盤-(後來結果~~)
Vant組件庫： https://youzan.github.io/vant/#/zh-CN/popup
引用vant組件庫，底部彈出框，做好的效果如下：（還不錯，判斷也簡單多了，需要小數點的話，也可用在左下角空格地方加上，稍做判斷）
html：（代碼是拷貝手寫密碼框拷貝過來的，命名勿計較，邏輯是按我的需求直接複製過來的，使用自己手動修改）
<div class="btn" @click='showPwInput2=true'>彈出數字模態框</div>
<!-- 數字鍵盤，輸入金額 -->
<div class="num-box">
<van-popup v-model="showPwInput2" class="pwPop" position="bottom">
<div class="forget border-b" @click="showPwInput2=false" style="text-align: center;padding: 0;height: 0.7rem;padding-top: 0.1rem;">
<img style="width: 0.58rem;transform: rotateZ(90deg);display: inline;" src="../../images/[email protected]"/>
</div>
<div class="inputs">
<div @click="inputNum2('1')">1</div>
<div @click="inputNum2('2')">2</div>
<div @click="inputNum2('3')">3</div>
<div @click="inputNum2('4')">4</div>
<div @click="inputNum2('5')">5</div>
<div @click="inputNum2('6')">6</div>
<div @click="inputNum2('7')">7</div>
<div @click="inputNum2('8')">8</div>
<div @click="inputNum2('9')">9</div>
<div class="bg-gray"></div>
<div @click="inputNum2('0')">0</div>
<div @click="delNum2" class="bg-gray">
<img src="../../goods/img/auctionGoodsDetail/tuige.png" />
</div>
</div>
</van-popup>
</div>
js： (導入vant組件庫)
<link rel="stylesheet" href="../../css/vant.css">
<script src="../../js/lib/vue.min.js"></script>
<script src="../../js/lib/vant.min.js"></script>
data: {
categoryMargin: '',
num: 0,
inputMoney: '',
},
methods: {
//數字鍵盤
inputNum2: function(num) {
if(this.inputMoney.length==0&&num=='0'){
this.inputMoney = '';
}else if(this.inputMoney.length<8){
this.inputMoney = this.inputMoney+num;
}
this.categoryMargin = this.inputMoney;
},
//數字鍵盤 刪除
delNum2: function() {
this.inputMoney = this.inputMoney.substring(0,this.inputMoney.length-1);
this.categoryMargin = this.inputMoney
},
}
css：
/*type爲number時，隱藏右邊的上下按鈕*/
input::-webkit-outer-spin-button,
input::-webkit-inner-spin-button {
-webkit-appearance: none;
}
input[type="number"] {
-moz-appearance: textfield;
}
/*後來加上的，用的話自己稍微整理下*/
.input-num{
width: 100%;
height: 100%;
text-align: center;
line-height: 1.29rem;
display: block;
font-size: 0.44rem;
padding: 0 0.2rem;
overflow: hidden;
}
.num-box .van-modal{
background-color: rgba(0, 0, 0, 0)!important;
}
.num-box .pwPop {
box-shadow: 0 0 0.2rem #999;
}
/*原先編寫的*/
.pwPop .tit{
position: relative;
text-align: center;
height: 1.2rem;
line-height: 1.2rem;
}
.pwPop .tit img{
position: absolute;
width: 0.4rem;
left: 0.4rem;
top: 0.4rem;
}
.pwPop .pwinput{
display: flex;
height: 1.29rem;
border: 1px solid #EEEEEE;
margin: 0.87rem 1rem 0.3rem 1rem;
}
.pwPop .pwinput div{
width: 1.29rem;
height: 1.29rem;
border-right: 1px solid #EEEEEE;
display: flex;
justify-content: center;
align-items: center;
font-size: 0.48rem;
font-weight: bold;
}
.pwPop .pwinput div img{
width: 0.3rem;
height: 0.3rem;
}
.pwPop .pwinput div:nth-of-type(6){
border-right:none!important;
}
.pwPop .forget{
height: 0.3rem;
padding: 0 1rem 0.65rem 0;
}
.pwPop .inputs{
clear: both;
display: flex;
flex-wrap: wrap;
width: 100%;
height: auto;
}
.pwPop .inputs div{
font-size: 0.48rem;
font-weight: bold;
width: 33%;
height: 1.29rem;
display: flex;
justify-content: center;
align-items: center;
border-bottom: 1px solid #EEEEEE;
border-right: 1px solid #EEEEEE;
}
.pwPop .inputs div:nth-of-type(3n){
border-right:none!important;
}
.pwPop .inputs div img{
width: 0.68rem;
}