????在項目實際開發(fā)過程中刀森，經(jīng)常會遇到某個文本框只能填寫數(shù)字的需求踱启。在Android上，input type=number是可以生效的研底。在iOS上即使做了限制埠偿，依舊可以鍵入字母。
榜晦？冠蒋？？乾胶？抖剿？？
在此羅列一下在工作中常用到的解決方案：
方案一：input增加pattern驗證
<input type='number' pattern="[0-9]*"/>
方案二：處理input綁定的value值
func() {
let a = this.inputValue
this.inputValue=a.replace(/[^0-9.]+/,'');"
}
方案三：input處理為只讀识窿，使用數(shù)字鍵盤組件
組件文檔地址：hips-UI組件庫-數(shù)字鍵盤
<input readlonly @click="showNumKerboard = true" v-modle="input" />
// 按照hips-UI組件庫-數(shù)字鍵盤的使用方法使用
import { NumberKeyboard } from '@hips/vue-ui';
Vue.use(NumberKeyboard);
<hips-number-keyboard
v-model="showNumKerboard"
complete-text="完成"
@press="handlePress"
@delete="handleDelete"
@delete-all="handleDeleteAll"
/>
export default {
data () {
return {
show: false,
}
},
handlePress (data) {
this.input = `${this.input}${data}`
},
handleComplete () {
console.log(`handleComplete`)
},
handleDelete () {
this.input = this.input.substr(0, this.input.length - 1)
},
handleDeleteAll () {
this.input = ''
},
}
效果如下：
WX20191218-160106@2x.png
（完）
