????在项目实际开发过程中，经?；嵊龅侥掣鑫谋究蛑荒芴钚词值男枨蟆Ｔ贏ndroid上，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处理为只读，使用数字键盘组件
组件文档地址：hips-UI组件库-数字键盘
<input readlonly @click="showNumKerboard = true" v-modle="input" />
// 按照hips-UI组件库-数字键盘的使用方法使用
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
（完）
