问题描述:在vue的input框只能输入数字,如电话号码等

实现代码:
<label>电话号码:</label> <input type="number" v-model="tel" placeholder="请输入"
oninput="if(value.length>11)value=value.slice(0,11)" @keydown=
"checkInput($event)">
其中:
1、type="number"限定只能输入数字,但可以是小数、自然对数的底:e,负数等
2、οninput=“if(value.length>11)value=value.slice(0,11)” 限定输入长度不得大于11位
3、@keydown则是添加一个vue键盘输入事件,触发方法checkInput
checkInput(e){ let prohibitInput= ["-", "e", "+", "E","."]; if(prohibitInput.
includes(e.key)){ e.preventDefault() } }
此方法作用为,当键盘输入与prohibitInput中值匹配到时,阻止元素发生的默认行为,实现prohibitInput中的值不能被输入。

但存在一个问题:当用中文输入法输入e并按回车,此时的输入的e则会在input框中展示,但输入框绑定的值其实是空的,所以需要增加一步校验就可以了,但是,出现这个问题我也没搞懂,希望有大佬能给解答一波~

增加输入校验
checkTelHead(tel){ //const r = /^\+?[0-9][0-9]*$/; // 正整数(可以以0打头) const r =
/^\+?[1-9][0-9]*$/; // 正整数 if (!r.test(tel)) { this.$alert("请输入正确的号码!"); return
false; }; if(telHead.length != 11){ this.$alert("请填写11位的号码!"); return false; };
return true; }

技术
©2019-2020 Toolsou All rights reserved,
TypeScript:函数类型接口8道大厂指针笔试题让你秒杀指针!!!MySQL 日期时间加减mysql 查询条件之外的数据_mysql 查询符合条件的数据查linux的操作系统版本,如何查看Linux操作系统版本?将String类型转换成Map数据类型使用uuid做MySQL主键,被老板,爆怼一顿C语言中的字符串函数和字符函数linux服务器中毒排查--基础篇C# ASCII码字符转换