vue IOS 下 input 正则表达式 整数和小数，小数后2位，最长11位

需求

• 自动唤起数字键盘
• input 只能输入整数和小数
• 小数最多输入2位
• 长度最长11位

代码

第一个想法肯定是👇的代码

 <input type='number' maxlength="11" placeholder="0" >

但是实际上ios下

• pc端number只能输入数字， 但是ios输入无限制
• 不能唤起数字键盘（九宫格）
• maxlength 长度不好使
• 可以输入任何的字符

那么自然就会想到一下几个不好使的方案：

IOS 原生键盘 测试

方案一：tel

 <input type='tel'>

不能输入小数点， 只能输入数字，可以输入+ *# 等

方案二：pattern="[0-9]*

 <input type='number' pattern="[0-9]*">
 <input type='text' pattern="[0-9]*">  【安卓不能调起数字键盘，ios可以】

不能输入小数点， 只能输入数字

方案三：number pattern="number"

 <input type='number' pattern="number">
 // <input type='text' pattern="number">  唤起字符键盘

虽然不能唤起九宫数字，但是可以唤起上面是数字， 下面是其他字符的键盘，而text 唤起的是纯字符键盘

方案四：text正则限制输入

 <input type='text' pattern="number" v-model="amount" @input="limit()">
 methods:{
    limit(val){
        let reg = /\d+(\.\d{0,2})?/;
        let limit_val = val.match(reg) ? val.match(reg)[0] : '';
        this.amount = limit_val
    }
 }

发现可以按照限制不能输入其他字符， 只能输入小数点和整数， 小数点后最多输入两位，但是发现唤起的不是数字键盘，每次都要切换

网上很多正则的限制方案都是type是text

终极方案五： number 正则表达式限制输入

 <input type='number' pattern="number" v-model="amount" @input="limit()">
 methods:{
    limit(val){
        let reg = /\d+(\.\d{0,2})?/;
        let limit_val = val.match(reg) ? val.match(reg)[0] : '';
        this.amount = limit_val
    }
 }

• 可以唤起数字键盘， 虽然不是九宫格
• input框看起来还是能输入各种字符，sgdhsyr 但是发送到后端的包含错误字符的都是空，
• 输入12.233 会变成12.23

长度： slice(0,11)

总结：

1. text 唤起的一定是字母字符，要想唤起数字键盘， type一定要是number
2. 想要限制输入，可以使用
   1. 正则表达式
   2. 自己写一个input组件
   3. 模拟一个自定义的键盘
   4. 听说这个包可以限制，没试过 ：github.com/tingxins/In…
3. 送一个： ios系统由于安全机制问题不允许自动唤起数字键盘，也就是v-focus不好使。