H5+Vue2: input(number/tel)唤起数字键盘,踩坑日记
h5页面做一个搜索功能,且只支持数字[0-9]输入。本来觉得so easy,结果笑容逐渐消失。
一、input type=number
<input type="number" v-model="val">
问题接踵而来:
1、maxlength属性失效,需要针对输入 @input 处理
<input type="number" v-model="val" @input="inputVal">// js
inputVal (e) {this.val = e.target.value.slice(0, this.maxlength)
}
2、+-.eE 这几个和浮点数相关的值,可以输入(其中e/E是科学计数法的关键字,1e2 = 1 * 10 ^ 2。这里的问题是多方面的:
- 文本框展示的值,与实际的value值差异明显。
- 输入后可能无法删除。
- 按我们的搜索需求,这几个值不应该支持输入
举例:
1)小数点。如输入13.14时,结果如下图。其中:13和13.,value都是13。
2)+-eE。如输入+-e,结果如下图。value是空字符串('')。且无法清空。
so,针对这几个特殊字符,其中的一个思路就是限制输入。
1)监听keypress/keydown事件,不满足输入时,阻止事件的默认行为。
<input type="number" v-model="val" @input="inputVal" @keypress="keypressVal">keypressVal (e) {let {key} = e;// 方式一:e.returnValue = /[0-9Backspace]/.test(key)// 方式二:// if (/[^0-9Backspace]/.test(key)) {// e.preventDefault()// }
}
在浏览器上测试,除了e,别的都输入不了(实际是输入法是英文的,除了e都输入不了;但中文输入法,这几个字符都能输入)。到Android机上测试,结果是这几个字符均可正常输入,就像这几行代码没加一样。ios已经不想测试了,心real累了。
2)input支持pattern属性,继续尝试
<input type="number" v-model="val" @input="inputVal" pattern="[0-9]*">
<input type="number" v-model="val" @input="inputVal" pattern="\d">
到Android机上测试,只是唤起了数字键盘,不耽误输入+-.eE。
至此,type=number 的方式被彻底放弃。
二:input type=tel
<input type="tel" v-model="tel" maxlength="5">
默认唤起数字键盘,支持maxlength,且支持所有的字符。类似默认唤起数字键盘 type=text 的文本框。按我们的需求,输入为非数字时,可替换为空字符。
<input type="tel" maxlength="5" @input="inputNumeric" v-model="numeric">inputNumeric (e) {this.numeric = e.target.value.replace(/\D/, '')
}
此方式基本满足需求。作为公共组件的话,还得花时间完善一下代码。
三:手写一个数字键盘
如果个人有能力,且愿意实践,手写一个数字键盘,也不失为一个方法。只是代价有点大,本人手动忽略(如果项目有特殊要求除外)。如果要站在巨人肩膀上,vant提供了数字键盘。
四:成熟的组件库 Vant-Field 输入框
// Vue 2 项目,安装 Vant 2
npm i vant@latest-v2 -S// 手动按需引入组件
import Vue from 'vue'
import { Field } from 'vant'
import 'vant/lib/field/style'
Vue.use(Field)<!-- 允许输入正整数,调起纯数字键盘 -->
<van-field v-model="digit" type="digit"/>
亲测好用,且提供了多种类型的输入框。咳,走了那么多弯路,最后得来全不费功夫。
源码:
type="digit": <input type=tel inputmode=numeric>,且对输入值value做了处理(过滤小数点、负号,只支持纯数字)。
还得是input type=tel,是本文二(二:input type=tel) 的高阶版。其中,inputmode并不是常用属性,需要学习,详见下文。
五:总结
h5页面做一个搜索功能,且只支持数字[0-9]输入。首先,最简单的方式是使用成熟组件库(可使用Vant 的Field 输入框)。其次是使用input type=tel,非数字的输入需处理成空字符串。最复杂的处理方式是定制一个数字键盘,甚至其中的数字可以是乱序的(某些银行app的数字键盘)。
六:补充说明
MDN inputmode:控制键盘的展示形式。可能的值:
- none:不使用系统提供键盘。用于页面有自定义键盘的情况。
- text:本地标准键盘。
- numeric:数字键盘。数字键,可能还包含减号。
- decimal:数字键盘。数字键和十进制的分隔符(.或,)。
- tel:数字键盘。数字键、星号(*)、井号(#)。
- search:用于搜索。回车/提交键盘可能显示成 search 或 搜索。
- url:用于输入URLs。键盘上有 / 符号。
- email:用于输入邮件地址。键盘上有@符号。
首先,tel、search、url、email 这四个值。
- 需要tel键盘时,一般使用<input type="tel">,而不是inputmode=tel。
- 需要搜索键盘时,一般使用<input type="search">,而不是inputmode=search。
- 需要输入URLs时,一般使用<input type="url">,而不是inputmode=url。
- 需要输入邮件地址时,一般使用<input type="email ">,而不是inputmode=email 。
其次,对于数字键盘,ios和Android,UI差异还是比较明显的。并不影响使用,注意功能的实现即可。
The end.
H5+Vue2: input(number/tel)唤起数字键盘,踩坑日记相关推荐
- 移动端苹果手机的input框type= number只是唤起数字键盘 不能阻止输入汉字和字母
移动端苹果手机的input框type= number只是唤起数字键盘 不能阻止输入汉字和字母 , input事件的replace(正则,'')没有作用 解决办法 用input type = text ...
- QML 自定义软键盘--踩坑日记
QML自带的键盘只有两种风格,但怕是不够用哦? 个人github地址: https://github.com/XXOO9 那么如何自定义键盘风格: 第一步:复制Qt自带的键盘风格文件资源到自己的项目目 ...
- vue2.x+springboot1.x+nginx服务器部署踩坑日记
vue项目具体搭建不做赘述: 配置打包方式 build: {// Template for index.html,env:require("./prod.env"),index: ...
- 记一次成功把Vue2后台项目改造成Vite2的踩坑经历
文章目录 前言 一.项目背景 1.1.为什么要选择Vite 二.迁移前的准备 2.1.补全.vue后缀 2.2.移动public/index.html的位置 2.2.1.通过vite-plugin-h ...
- 解决 H5 IOS input 聚焦时,软键盘将页面整个推上去,键盘收起页面未下移 BUG
目录 问题描述 解决方案 问题描述 近日在开发H5应用时,测试人员发现在IOS低版本中input,textArea等输入框聚焦时,软键盘弹起会将整个页面向上顶,收回键盘后,页面不会回弹恢复页面,导致页 ...
- 浅谈cesium在vue2中的使用---踩坑日记(一)
vue2+cesium,我的踩坑记录 许久不见,我又诈尸更博了.最近刚刚忙完项目,继续研究cesium,为以后做准备.也遇到了好多好多的坑,查了很多资料,好在最终是解决了. 在此分享下我的经验,顺便记 ...
- input 禁止手机唤起软键盘,并且光标存在
首先先将input 设置为readonly="readonly"状态 input添加点击事件click(防止多次点击唤出软键盘) 后在input readonly 状态下聚焦 l ...
- Android踩坑日记:监听软键盘多次调用和刷新系统相册和获取所有相片
EditText设置监听软键盘删除键(或enter) 一般使用方法 edittext.setOnKeyListener(new View.OnKeyListener(){@Overridepublic ...
- 微信公众号H5端网页分享微信好友-实现思路(踩坑记录总结)
第三方配置就不说了,按着官方文档来就可以了 第一个坑 在进行接口鉴权时需要签名等参数,签名等参数需要调用后端接口返回.需要注意的是:调用接口需要一个参数就是页面路径地址(url参数,我这边页面路径用u ...
最新文章
- python什么时候用框架_Python 中三大框架各自的应用场景
- 渗透知识-CSRF攻击
- 持续集成工具Hudson安装实例
- dg oracle 切换模式_oracle dg切换操作示例
- ubuntu14.04+eigen3安裝(亲测)
- flutter text 自动换行_Flutter 系列博客——05 StatelessWidget vs StatefulWidget
- ✨Synchronized底层实现---概述
- logback error 分开存日志
- .NET Framework第一二课(7/26、27)
- iPhone 14 Pro Max拆解:内部元器件供应商名单
- JDBC驱动连接SQLserver数据库
- Linux 所有版本内核源码下载
- QComboBox实现下拉框check勾选
- BAT等互联网公司薪资分享
- 前端搞一个扭蛋抽奖小动画?
- 阿里矢量图标iconfont在微信小程序的使用
- 推荐几个阿里,百度大佬的订阅号给大家
- 行测资料分析之三角形权重图
- RabbitMQ快速入门
- JaveMail实现发送QQ邮件