type=number 的maxlength和可以输入E的问题
有一个输入框,要求只能输入1到999以下数字,于是
设置<input type="number" min="1" max="999">
结果发现可以输入e.因为e是一个常数。
使用网上的解决办法加入:
onkeypress='return( /[\d]/.test(String.fromCharCode(event.keyCode)))
这样解决了可以输入E的问题,但是这样输入框输入的数字可以大于999了。。
最后面采用以下方法解决:
<input type="number" min="1" max="9999" maxlength="4" oninput="value=value.replace(/e/g,'');if(value.length>4)value=value.slice(0,4)">
以上发现还是有问题,被全部替换了。最终,改成type="text",输入后用正则替换完所有非数字字符后,再取左4位
<input type="text" oninput="value=value.replace(/[^\d]/g,'');if(value.length>4)value=value.slice(0,4)">
或是
<input type="text" maxlength="4" oninput="value=value.replace(/[^\d]/g,'')">
type=number 的maxlength和可以输入E的问题的更多相关文章
- input type="number" 时 maxlength不起作用
给input标签添加 oninput=“if(value.length>11) value=value.slice(0,11)”
- vue 限制input[type=number]的输入位数策略整理
https://blog.csdn.net/weistin/article/details/79664261 vue type="number 设置maxlength 是无效的 我们可以 ...
- input属性设置type="number"之后, 仍可输入e;input限制只输入数字
只需在行内输入 onKeyUp="this.value=this.value.replace(/[^\.\d]/g,'');" 就解决了 <input typ ...
- input输入框type=number时的一个缺陷
本来是在vue里发现获取不到 input[ type="number"]的值,就是输入两个小数点的数值,比如1.1.1,以为是vue的错误,然而不是,vue只做了数字处理 不明白为 ...
- 移动端 输入框 如果类型是number,用户也可以输入汉字和字母
<input type="number" id="input-age" placeholder="请输入你的年龄" /> //i ...
- 限制input[type=number]的输入位数策略整理
当我们使用类型number的input输入框的时候,我们可能需要限制输入的位数,这个时候通常会想到maxlength,但是maxlength是在number类型的时候是不支持的,下面是一些解决这种问题 ...
- html:input的type=number的时候maxlength失效问题
<input type="text" maxlength="5" /> 效果ok,当 <input type="number& ...
- 输入类型<input type="number"> / input标签的输入限制
输入限制 属性 描述 disabled 规定输入字段应该被禁用. max 规定输入字段的最大值. maxlength 规定输入字段的最大字符数. min 规定输入字段的最小值. pattern 规定通 ...
- input输入框type设置为number,maxlength无效
一个小细节,以前很少注意,直到最近做的一个项目,当我把一个输入数字的input框的类型设置为number时,input框还是可以无限输入,设置maxlengh=10就不起作用了.然后我就去百度了一下, ...
随机推荐
- openssh升级,打补丁
以Root用户上传升级包至/home/dou/system openssh-7.5p1.tar.gz openssl-1.0.2l.tar.gz zlib-1.2.11.tar.gz l 安装所需包 ...
- (17)线程队列---queue LifoQueue PriorityQueue
线程常用队列有: queue LifoQueue PriorityQueue 语法: 大致和进程队列语法一致 put 往队列当中放值,超过队列长度,直接加阻塞 get 如果获取不到加阻塞 put_no ...
- 《SQL 基础教程》第三章:聚合和排序
这一章节主要讲了三方面的内容: 数据的汇总操作a. 聚合函数b.分组操作 给汇总操作指定条件 对汇总结果进行排序 COUNT()等聚合函数 定义: 输入多行,输出一行的函数称为聚合函数 功能: 用于对 ...
- httpd常见配置
httpd常见配置 配置文件 /etc/httpd/conf/httpd.conf 主配置文件 /etc/httpd/conf.d/*.conf 辅助配置文件 配置文件语法检查及重新加载配置文 ...
- IIS+NGINX 负载web服务器
Nginx是一款轻量级的Web 服务器/反向代理服务器及电子邮件(IMAP/POP3)代理服务器,并在一个BSD-like 协议下发行.其特点是占有内存少,并发能力强,事实上nginx的并发能力确实在 ...
- commons-lang3工具类学习(一)
一.ArchUtils java运行环境的系统信息工具类 getArch();// 获取电脑处理器体系结构 32 bit.64 bit.unknown getType();// 返回处理器类型 ...
- Visual Basic 2017 操作Excel和word【1】持续更新……
我坚持在VB的路上走到黑………… 清单1.1 从应用程序对象导航到Excel中的工作表 Dim myWorkbooks As Excel.Workbooks = app.Workbooks ) ...
- Linux3.10.0块IO子系统流程(6)-- 派发SCSI命令到低层驱动
在SCSI策略例程中最后调用scsi_dispatch_cmd将SCSI命令描述符派发给低层驱动进行处理 /** * scsi_dispatch_command - Dispatch a comman ...
- nopi 简洁笔记
导出excel /// <summary> /// 增加二维码 /// </summary> /// <param name="dt">< ...
- OO课程中IDEA相关插件的使用
写在前面 由于OO课程博客作业的需要分析代码的复杂度并绘制UML图,但是课件上推荐的分析工具(http://metrics.sourceforge.net )经过自己几个小时的折腾还是没有安装成功 ...