input中type=number IOS 无效的解决方案

在项目实际开发过程中，经常会遇到某个文本框只能填写数字的需求。在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处理为只读，使用数字键盘组件

组件文档地址：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

（完）