微信端html只显示数字键盘,在移动端内嵌H5页面中数字框调用数字键盘,且只允许输入0-9和小数点的总结...-程序员宅基地

技术标签: 微信端html只显示数字键盘  

最初是想要在H5页面中输入数字的时候调起数字键盘,且只能输入数字和小数点,并且小数点后最多保留两位小数

实践证明:

1.input:

type = 'number'时, 当输入的为非法数字 例如包括-+等,则在取value的值时判断为非数字就会将value自动置为‘’,

且在ios中number类型不能成功调起数字键盘,需要使用pattern调取数字键盘,但是此时系统键盘没有小数点

type = 'tel' 调起数字键盘 没有number value为空的问题

同样在ios没有小数点

type = "text" pattern="[0-9]*" 在安卓无法调取数字键盘 ,在ios能调起数字键盘没有小数点,同时能输入-+/

其他type 则能输入字符等

2.ios原生的可以设置keyboard type = decimal pad . 这个样子的只能用原生.

3.无法实现与web端一致的实时校验 keydown + keyup == input H5只有input

4.前端自己定制键盘,存在安全性问题 且需要禁止系统键盘,并且使用disabled禁止之后 没有光标了也是一个问题

最终解决,在input的时候做校验,但不是实时校验,因为输入字符串的时候编辑完一串字符串点击字符串才会触发input,其实在pc端输入中文也是如此:

v-model.trim="inputNum" @input="saveNumberData" maxlength="20">

methods:

saveNumberData () {

this.checkFloatNumber(this.inputNum);

}

checkFloatNumber (val){

let reg = new RegExp(/^[0-9]+(.[0-9]{1,2})?$/);

let length_1 = val.length-1;

let length_2 = val.length-2;

if (val) { // 当输入了值

if (!reg.test(val)) { // 并且值不合法

if (reg.test(val.substr(0,length_1))) { // 如果除去最后一位前面的合法

if(val.charAt(length_1) == '.' && val.indexOf('.') == length_1) {

// 当最后一位为小数点并且值中只有一个小数点,则保留值

this.inputNum = val;

} else {

// 否则去掉最后一位

版权声明:本文为博主原创文章,遵循 CC 4.0 BY-SA 版权协议,转载请附上原文出处链接和本声明。
本文链接:https://blog.csdn.net/weixin_36272416/article/details/117859371

智能推荐

图像局部特征(二十)--Textons_texton特征-程序员宅基地

文章浏览阅读9.5k次。转自:http://blog.csdn.net/jzwong/article/details/51815134标题对应着一篇paper,链接在这里:http://idm.pku.edu.cn/staff/wangyizhou/papers/Texton_IJCV2005.pdf,但是看了半天并没有很理解,所以就从知网上搜了搜相关内容,根据知网上的介绍做一个总结,只能说是对texton特征的一个..._texton特征

2021中国信创产业研究报告 附下载-程序员宅基地

文章浏览阅读479次。长期以来,我国对非国产IT产品的依赖程度较高,底层架构标准及上层生态构建的话语权较弱,导致了较为被动的局面。信创即信息技术应用创新,是我国IT产业自主创新、发展升级的长久之计。在信创背景下..._2021信创产业研究报告

1617: Special Formation - 规律题_special formation 题解-程序员宅基地

文章浏览阅读208次。1617: Special Formation时间限制: 1 Sec内存限制: 128 MB提交: 3解决: 3[提交] [状态] [讨论版] [命题人:mfdy]题目描述A large number of new microbes have been found in an uninhabited island. Strangely, these microbes, ho..._special formation 题解

08:STM32----DMA数据转运_dma_setcurrdatacounter-程序员宅基地

文章浏览阅读738次,点赞3次,收藏6次。在stm32f10x dmah文件中配置----MDA初始化在stm32f10x dmah文件中配置----开启MDA在stm32f10x dmah文件中配置----数据寄存器设置: 设置当前数据寄存器 , 就是给这个传输计数器写数据的, 和配置DMA中X.DMA_Buffersize参数相似: 获取当前数据寄存器, 这个函数就是返回传输计数器的值 , 在转运完成后把标志位值1在stm32f10x dmah文件中配置----清除中断标志位: 清除中断标志位。_dma_setcurrdatacounter

OLED的SPI接口数据显示_typedef struct { unsigned char index[2]; unsigned -程序员宅基地

文章浏览阅读848次,点赞2次,收藏7次。目录实验要求准备工作结果呈现总结实验要求准备工作1、准备实验所需要的程序代码和资料,参考在如下网址:http://www.lcdwiki.com/zh/0.96inch_SPI_OLED_Module2、打开下图路径,在上述链接中3、进行野火stm32主板与OLED屏的连线4、连线完成5、使用软件生成字模6、修改部分代码将6、编译成功,使用串口工具烧录结果呈现可以看到OLED屏亮显示学号姓名总结..._typedef struct { unsigned char index[2]; unsigned char msk[32]; }typfnt_g

Mac/OSX 系统如何采集扬声器(代码实现 附源码)_macos 音频采集-程序员宅基地

文章浏览阅读974次。总所周知由于版权问题,mac系统是无法通过api采集扬声器的音量的,一些录屏软件大多采用soundflower,lookloop等插件来实现扬声器的采集。soundflower这种免费的插件已经没人维护了,最新的M1 已经无法使用了。这里推荐一个免费的支持M1架构的插件blackhole,操作与soundflower类似,创建一个多输出设备,将录制的扬声器设置为该多输出设备,看起来像这样:在我们使用obs,系统自带的录屏软件时就可以选择该输出设备作为扬声器采集从而实现扬声器音量采集。._macos 音频采集

随便推点

2-3 jsr303参数校验和全局异常处理_validatorutil.ismobile-程序员宅基地

文章浏览阅读1k次。1、定义注解(IsMobile),规则①在 LoginController类中:public Result<Boolean> doLogin(@Valid LoginVo loginVo) {//loginVo 相当于是表单之中提交的数据②在LoginVo类中:import com.mydre.miaosha.validator.IsMobile;public class LoginV..._validatorutil.ismobile

神经网络之反向传播算法(BP)公式推导_bp神经网络传播公式-程序员宅基地

文章浏览阅读862次。反向传播算法详细推导反向传播(英语:Backpropagation,缩写为BP)是“误差反向传播”的简称,是一种与最优化方法(如梯度下降法)结合使用的,用来训练人工神经网络的常见方法。该方法对网络中所有权重计算损失函数的梯度。这个梯度会反馈给最优化方法,用来更新权值以最小化损失函数。 在神经网络上执行梯度下降法的主要算法。该算法会先按前向传播方式计算(并缓存)每个节点的输出值,然后再按反向传播..._bp神经网络传播公式

目标检测(十九)--SoftNMS_gpu softmns-程序员宅基地

文章浏览阅读1.6w次,点赞4次,收藏23次。转自:http://blog.csdn.net/shuzfan/article/details/71036040一篇讲通过改进NMS来提高检测效果的论文。文章链接: 《Improving Object Detection With One Line of Code》Github链接: https://github.com/bharatsingh430/soft-nmsM..._gpu softmns

vue 使用canvas来进行画线条_vue canvas 画线-程序员宅基地

文章浏览阅读2.9k次。下载canvasnpm i --save canvas//html部分 <divid="content"><canvasid="canvas"width="900%"height="250%"></canvas><divclass="con-left"><divclass="item"v-for="(v,i)inthi..._vue canvas 画线

【C#】通过遍历IFrame访问页面元素_iframe遍历子页面元素-程序员宅基地

文章浏览阅读4.9k次。最近在做一个小项目,期间需要用到C#去操作IE页面中的元素,实现自动填写表单并且提交的功能,想这网上关于这方面的东西肯定很多,于是开始在网上找资料。在逆心的博客上找到些东西对自己帮助很大,原文链接:http://www.cnblogs.com/kissdodog/p/3725774.html1.首先添加必须的两个控件的引用Microsoft Internet Controls_iframe遍历子页面元素

推荐文章

热门文章

相关标签