input type='tel' VS type='number'
Posted yan89
tags:
篇首语:本文由小常识网(cha138.com)小编为大家整理,主要介绍了input type='tel' VS type='number'相关的知识,希望对你有一定的参考价值。
有个小需求 验证手机号(移动h5)
手机上点输入框调起数字键盘,并且只能输入11位纯数字
一开始用的<input type=‘number‘ v-model="phone" maxlengt="11">
但是有两个问题:
一是maxlength不起作用 无法限制长度
另一个是 由于数字键盘可以输入‘-+.‘这两个字符 一旦输入这两个字符 this.phone 的值就变成空(暂未发现原因,待更新)
解决办法:
type的属性值 有一个tel 定义用于电话号码的文本字段
于是改为<input type=‘tel‘ v-model="phone" @input="input" maxlengt="11">
这样写maxlength会生效 由于是电话键盘 除了‘-+.‘ 还允许输入‘#*’时 此时 this.phone 就是 输入框中的值
因此还需要通过js代码 处理这两个符号 添加一个input方法:
input()
this.phone = this.phone.replace(/[^0-9]/g, ‘‘);
这样就实现了我们想要的功能。
以上是关于input type='tel' VS type='number'的主要内容,如果未能解决你的问题,请参考以下文章