移动端调起数字键盘的问题

在做移动端调起数字键盘的时候，碰到了不少的问题，在网上找到了方案，但是却不符合我的要求的，现在总结下:

1.使用input type为number的类型，这种确实可以调起数字键盘，但是存在以下问题，会忽略掉点(.)，这样会导致正则无法匹配的问题，另外我在v-model中绑定的值被清空了，但是无法修改视图，修改type为text类型就可以

2.使用input type为text的类型，这种使用正则可以允许只填写价格的正则表达式，但是无法调起数字键盘

3.使用input type为tel的类型，这种可以调起数字键盘，在结合上面的正则表达式，可以做到满足我的需求验证价格

//需要验证的表单
<input class="setup-list-right setup-list-color" type="tel" v-model="accountsArg.amount_total" @input="isNumber('amount_total')" :placeholder="$t('message.Cash.qsrskje')">
//可以使用@input="isNumber('amount_total')" 或 @input="changeInput('amount_total')"
//验证表单的方法
isNumber (name) {//判断要验证的值是否是小于0和是否是数字，不是数字清空if(this.accountsArg[name] < 0 || isNaN(this.accountsArg[name])){this.accountsArg[name] = '';}//保留小数点后两位var arg = this.accountsArg[name].split('.');if(arg[1] && arg[1].length >= 3){this.accountsArg[name] = arg[0] + '.' + arg[1].substr(0,2);}}//正则验证的方法changeInput (name) {let regPrice = /(^[1-9]\d*(\.\d{1,2})?$)|(^0(\.\d{1,2})?$)/,regPriceFloat = /^((\d{1,10})|0)(\.)$/;//regPriceFloat是为了验证以.结尾的时候进行匹配，因为regPrice在@input事件中以.结尾时无法匹配if (!regPrice.test(this.accountsArg[name]) && !regPriceFloat.test(this.accountsArg[name])) {this.accountsArg[name] = '';}}

以上代码只是符合个人需求

参考文档:

https://www.cnblogs.com/chris-oil/p/5001748.html
https://blog.csdn.net/qq_22509715/article/details/78993912

移动端调起数字键盘的问题相关推荐

【移动端】如何在移动端调出纯数字键盘
最近在做手机页面时,遇到数字输入的键盘的问题,之前的做法只是一刀切的使用 type="tel",不过一直觉得九宫格的电话号码键盘上的英文字母太碍事了.于是想要尝试其它的实现方案,最 ...
iOS html5 键盘小数点,在移动端内嵌H5页面中数字框调用数字键盘，且只允许输入0-9和小数点的总结...
最初是想要在H5页面中输入数字的时候调起数字键盘,且只能输入数字和小数点,并且小数点后最多保留两位小数实践证明: 1.input: type = 'number'时, 当输入的为非法数字例如包括- ...
一个数字键盘引发的血案——移动端H5输入框、光标、数字键盘全假套件实现...
https://juejin.im/post/5a44c5eef265da432d2868f6 为啥要写假键盘? 还是输入框.光标全假的假键盘? 手机自带的不用非得写个假的,吃饱没事干吧? 装逼?炫技 ...
移动端开发input标签调用数字键盘
先上代码: <input id="pp" type="number" maxlength="6" pattern="[0-9 ...
移动端苹果手机的input框type= number只是唤起数字键盘不能阻止输入汉字和字母
移动端苹果手机的input框type= number只是唤起数字键盘不能阻止输入汉字和字母 , input事件的replace(正则,'')没有作用解决办法用input type = text ...
h5 android数字键盘,【笔记】移动端H5数字键盘input type=number的处理（IOS和Android）...
在Vue中的项目,基于VUX-UI开发,一个常见的需求: 1.金额输入框 2.弹出数字键盘 3.仅支持输入两位小数,限制最大11位数,不允许0开头第一,首先想到额就是在VUX-UI中制定type=n ...
移动端输入框弹出键盘控制
在移动端,我们公司通过输入框主要收集用户的姓名和电话,以下是对输入框获取焦点时,控制弹出键盘的样式来增强用户体验. 输入姓名我们的用户都是中国人,输入用户名为中文,所以弹出键盘是输入中文状态即可,这 ...
H5+Vue2: input(number/tel)唤起数字键盘，踩坑日记
h5页面做一个搜索功能,且只支持数字[0-9]输入.本来觉得so easy,结果笑容逐渐消失. 一.input type=number <input type="number" ...
vue封装自定义数字键盘组件
最近在公司做一个项目,简单来说就是web端微信公众号上的一个申请表单页面,随便如个图环境: vue框架 + vant组件库 + 其它(这里用不上的,不说) 具体如图: 都知道,input输入框如果不 ...

移动端调起数字键盘的问题

在做移动端调起数字键盘的时候，碰到了不少的问题，在网上找到了方案，但是却不符合我的要求的，现在总结下:

1.使用input type为number的类型，这种确实可以调起数字键盘，但是存在以下问题，会忽略掉点(.)，这样会导致正则无法匹配的问题，另外我在v-model中绑定的值被清空了，但是无法修改视图，修改type为text类型就可以

2.使用input type为text的类型，这种使用正则可以允许只填写价格的正则表达式，但是无法调起数字键盘

3.使用input type为tel的类型，这种可以调起数字键盘，在结合上面的正则表达式，可以做到满足我的需求验证价格

以上代码只是符合个人需求

参考文档:

移动端调起数字键盘的问题相关推荐

最新文章

热门文章