h5 android数字键盘,【笔记】移动端H5数字键盘input type=number的处理(IOS和Android)...
在Vue中的项目,基于VUX-UI开发,一个常见的需求:
1、金额输入框
2、弹出数字键盘
3、仅支持输入两位小数,限制最大11位数,不允许0开头
第一,首先想到额就是在VUX-UI中制定type=number。--不可行
VUX中的文档和代码说明,type=number不支持maxLength,会报错,而且没有正则替换的处理或者钩子函数,只有输入后提示校验信息。
第二,基于VUX中XInput封装,有如下问题
1)两层v-model,正则替换的值不会触发input框渲染
解决:currentValue赋值为foramttedValue,放入setTimeout(func ,0)中,让input框先渲染为正则替换前的值,再渲染为替换后的值
currentValue(val, oldVal) {//调用filter过滤数据
let formattedValue = this.filter(val);if (this.type === ‘number‘) {
formattedValue= this.typeNumberFilter(formattedValue, oldVal);
}if (val !== formattedValue || val === ‘‘) {
setTimeout(()=>{this.currentValue =formattedValue;
},0);
}this.$emit(‘input‘, formattedValue);
},
View Code
2)数字键盘input type=number,会导致maxlength失效,无法限制长度
解决:用slice(0, max)处理
if (formattedValue.length > this.max) {
formattedValue= formattedValue.slice(0, this.max);
}
View Code
3)数字键盘input type=number ,连续输入小数点...导致实际值和显示值不一致
解决:用原生的 inputElement.value = oldValue处理
const inputEle = this.$children[0].$refs.input;//TODO: 待大范围验证:处理连续输入..后,type=number的input框会把值修改为‘‘的问题;fastclick导致type=number报错
//问题描述: 1.00. 不会触发值改变,1.00.不会触发值改变,1.00.【\d\.】都会把值修改为空字符串‘‘。hack处理的条件说明如下:
//1、当校验后是空值,(因input=number,formattedValue为‘‘表明 原始newVal也为‘‘)
//2、输入框拿到的是空值(因input=number导致输入框立即被赋予空值。点击清除按钮时,这里input输入框还是上次的值)
//3、上次输入大于两位(避免最后一位无法删除的问题。最后一位删除时,oldVal.length === 1)
if (formattedValue === ‘‘ && inputEle.value === ‘‘ && oldVal && oldVal.match(/^(\d)[\d.]+/)) {
formattedValue=oldVal;
}
setTimeout(()=>{
inputEle.value=formattedValue;
},0);
View Code
4)IOS中数字键盘有%$*等特殊字符
解决:用原生的 inputElement.onkeydown监听事件,非数字和退格和小数点直接return事件
mounted() {if (this.type === ‘number‘) {
const inputEle= this.$refs.xinput.$refs.input;//eslint-disable-next-line
inputEle.onkeydown = (e) =>{
const keyCode=e.keyCode;if (!this.isBackspace(keyCode) && !this.isDot(keyCode) && !this.isNumber(keyCode)) {//其他按键
e.preventDefault();
e.stopPropagation();return false;
}
};
}
}
View Code
第三,其他说明
为什么不用 type=tel?
type=tel在ios中没有小数点
第四,全部代码
:title="title":max="currentMax":min="currentMin":type="type"v-model="currentValue"@on-focus="onFoucus()"@on-blur="onBlur()":show-clear="showClear":placeholder="placeholder"ref="xinput">
data() {return{
currentValue:this.value,
};
},
computed: {
currentMax() {return (this.type === ‘number‘) ? undefined : this.max;
},
currentMin() {return (this.type === ‘number‘) ? undefined : this.min;
}
},
props: {
title: String,
max: Number,
min: Number,
type: String,
showClear: {
type: Boolean,default: true,
},
placeholder: String,
value: [String, Number],
filter: {
type: Function,default: (value) =>{
let formattedValue= ‘‘;
const match= value.match(/^([1-9]\d*(\.[\d]{0,2})?|0(\.[\d]{0,2})?)[\d.]*/);if(match) {
formattedValue= match[1];
}returnformattedValue;
},
}
},
watch: {
currentValue(val, oldVal) {//调用filter过滤数据
let formattedValue = this.filter(val);if (this.type === ‘number‘) {
formattedValue= this.typeNumberFilter(formattedValue, oldVal);
}if (val !== formattedValue || val === ‘‘) {
setTimeout(()=>{this.currentValue =formattedValue;
},0);
}this.$emit(‘input‘, formattedValue);
},
value(value) {this.currentValue =value;
},
},
methods: {
onFoucus() {this.$emit(‘on-focus‘);
},
onBlur() {this.$emit(‘on-blur‘);
},
typeNumberFilter(val, oldVal) {
const inputEle= this.$refs.xinput.$refs.input;
let formattedValue=val;//由于type=number不支持maxLength,用slice模拟
if (formattedValue.length > this.max) {
formattedValue= formattedValue.slice(0, this.max);
}//TODO: 待大范围验证:处理连续输入..后,type=number的input框会把值修改为‘‘的问题;fastclick导致type=number报错
//问题描述: 1.00. 不会触发值改变,1.00.不会触发值改变,1.00.【\d\.】都会把值修改为空字符串‘‘。hack处理的条件说明如下:
//1、当校验后是空值,(因input=number,formattedValue为‘‘表明 原始newVal也为‘‘)
//2、输入框拿到的是空值(因input=number导致输入框立即被赋予空值。点击清除按钮时,这里input输入框还是上次的值)
//3、上次输入大于两位(避免最后一位无法删除的问题。最后一位删除时,oldVal.length === 1)
if (formattedValue === ‘‘ && inputEle.value === ‘‘ && oldVal && oldVal.match(/^(\d)[\d.]+/)) {
formattedValue=oldVal;
}
setTimeout(()=>{
inputEle.value=formattedValue;
},0);returnformattedValue;
},
isBackspace(keyCode) {return keyCode === 8;
},
isDot(keyCode) {return keyCode === 46 || keyCode === 110 || keyCode === 190;
},
isNumber(keyCode) {return (keyCode >= 48 && keyCode <= 57) || (keyCode >= 96 && keyCode <= 105);
},
},
mounted() {if (this.type === ‘number‘) {
const inputEle= this.$refs.xinput.$refs.input;//eslint-disable-next-line
inputEle.onkeydown = (e) =>{
const keyCode=e.keyCode;if (!this.isBackspace(keyCode) && !this.isDot(keyCode) && !this.isNumber(keyCode)) {//其他按键
e.preventDefault();
e.stopPropagation();return false;
}
};
}
}
};
View Code
h5 android数字键盘,【笔记】移动端H5数字键盘input type=number的处理(IOS和Android)...相关推荐
- 动手写个数字输入框1:input[type=number]的遗憾
前言 最近在用Polymer封装纯数字的输入框,开发过程中发现不少坑,也有很多值得研究的地方.本系列打算分4篇来叙述这段可歌可泣的踩坑经历: <动手写个数字输入框1:input[type=nu ...
- 移动端h5唤起键盘_移动端H5界面打开后,如何自动调用软键盘
test(){ // let aa = this.$refs.input1.blur(); // this.$nextTick((x)=>{ //正确写法 // // this.$refs.in ...
- android滴滴开源,DoKit - 滴滴开源的一款功能齐全的客户端( iOS 、Android )研发助手...
技术编辑:鸣飞 发自北京 SegmentFault 思否报道 | 公众号:SegmentFault SegmentFault 思否消息:滴滴技术团队今天宣布,Dokit 3.0 版本正式发布,Dora ...
- 移动端h5唤起键盘_移动端H5监听键盘弹出和收起
const isIOS= /iphone|ipad|ipod/.test(ua); const isAndroid= /android/.test(ua);if(isIOS) { let isRese ...
- h5页面的写法_移动端h5页面写法
1. 页面宽度320, 所有元素尺寸设一半 缺点:不自能适应全屏 2.页面宽度640,元素尺寸正常 暂未发现问题 3.页面宽度640,js控制自适应全屏 eval(function(p,a,c,k,e ...
- input type=number 禁止输入字母E,只能输入数字和小数点
$('input[type=number]').keypress(function(e) { if (!String.fromCharCode(e.keyCode).match(/[0-9\.]/)) ...
- 一个数字键盘引发的血案——移动端H5输入框、光标、数字键盘全假套件实现...
https://juejin.im/post/5a44c5eef265da432d2868f6 为啥要写假键盘? 还是输入框.光标全假的假键盘? 手机自带的不用非得写个假的,吃饱没事干吧? 装逼?炫技 ...
- 移动端h5兼容ios和Android
viewport <meta charset="utf-8"> <!--主要I是强制让文档的宽度与设备宽度保持1:1,最大宽度1.0,禁止屏幕缩放.--> ...
- 移动端H5网页开发常见问题汇总
简介 这篇文章主要是总结下移动端开发常见问题,帮助大家一起避坑.如果已经看过这篇文章了的话也可以看看笔者写的 移动端H5网页开发必备知识 移动端开发必备知识-Hybrid App HTML方面 调用系 ...
最新文章
- css颜色rgba代码对照表_改善 CSS 的 10 个最佳实践
- 怎么判断冠词用a还是an_英文写作常见错误学习笔记 | 冠词
- [raywenderlich教程]
- startlogging中设置setstdout=false来禁用这个功能。_Windows 10禁用USB选择性暂停设置,峰哥教你解决USB设备失灵问题...
- ueditor插入自定义内容和样式
- 【图像增强】基于matlab GUI暗通道图像去雾【含Matlab源码 835期】
- 统一沟通-技巧-10-Lync-公网证书-Go Daddy-Buy
- 小米平板4刷recovery教程_小米4刷第三方recovery教程和方法
- 论文翻译 | R-CNN论文:《Rich feature hierarchies for accurate object detection and semantic segmentation》
- JTT808协议解析数据相关问题 python
- 计算机键盘上范的怎么点击,微信怎么用键盘最小化 电脑最小化键盘怎么按
- 【数据库】数据库期末考试复习试题与答案
- 双线性插值法图像放缩示例
- 香港主机CDN加速,让您的网站速度飙升
- Win10系统下Eclipse+ADT+SDK配套安装(避免遇坑)
- 标准cpci接口定义_cpci定义
- 模糊逻辑学习--什么是模糊逻辑
- 手机数控模拟器安卓版_数控机床模拟器手机版下载-数控机床模拟器高级版下载v1.1.4 安卓版-单机手游网...
- Iphone内存测试软件,免越狱一次性查出iPhone6内存型号的方法
- kali下对Docker的详细安装