有一个输入框,要求只能输入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的问题的更多相关文章

  1. input type="number" 时 maxlength不起作用

    给input标签添加 oninput=“if(value.length>11) value=value.slice(0,11)”

  2. vue 限制input[type=number]的输入位数策略整理

    https://blog.csdn.net/weistin/article/details/79664261 vue type="number   设置maxlength 是无效的 我们可以 ...

  3. input属性设置type="number"之后, 仍可输入e;input限制只输入数字

    只需在行内输入   onKeyUp="this.value=this.value.replace(/[^\.\d]/g,'');"     就解决了   <input typ ...

  4. input输入框type=number时的一个缺陷

    本来是在vue里发现获取不到 input[ type="number"]的值,就是输入两个小数点的数值,比如1.1.1,以为是vue的错误,然而不是,vue只做了数字处理 不明白为 ...

  5. 移动端 输入框 如果类型是number,用户也可以输入汉字和字母

    <input type="number" id="input-age" placeholder="请输入你的年龄" /> //i ...

  6. 限制input[type=number]的输入位数策略整理

    当我们使用类型number的input输入框的时候,我们可能需要限制输入的位数,这个时候通常会想到maxlength,但是maxlength是在number类型的时候是不支持的,下面是一些解决这种问题 ...

  7. html:input的type=number的时候maxlength失效问题

    <input type="text"  maxlength="5" />   效果ok,当 <input type="number& ...

  8. 输入类型<input type="number"> / input标签的输入限制

    输入限制 属性 描述 disabled 规定输入字段应该被禁用. max 规定输入字段的最大值. maxlength 规定输入字段的最大字符数. min 规定输入字段的最小值. pattern 规定通 ...

  9. input输入框type设置为number,maxlength无效

    一个小细节,以前很少注意,直到最近做的一个项目,当我把一个输入数字的input框的类型设置为number时,input框还是可以无限输入,设置maxlengh=10就不起作用了.然后我就去百度了一下, ...

随机推荐

  1. linux中搭建vue-cli

    1 安装nvm依赖并配置环境变量在 sudo wget -qO- https://raw.githubusercontent.com/creationix/nvm/v0.34.0/install.sh ...

  2. Angular4学习笔记(四)- 依赖注入

    概念 依赖注入是一种设计思想,并不是某一类语言所特有的,因此可以参考开涛大神关于学习Java语言的Spring框架时对其的解释: DI-Dependency Injection,即"依赖注入 ...

  3. ThinkPHP5.0完全开发手册 --技术文档

    1.ThinkPHP5.0完全开发手册.chm 链接:https://pan.baidu.com/s/1199wK6q6O9IyOf5RU_-Xow 提取码:hnek 2.ThinkPHP5.0完全开 ...

  4. Rails6.0 Beta版本1: Action Text的简单使用

    主要功能是新增2个主要的框架Mailbox和action Text. 和2个重要的可扩展的升级: multiple databases support和parallel testing. Action ...

  5. java、maven、tomcat 环境变量配置

    Linux 配置java.maven.tomcat 环境变量 打开 /etc/profile 在下面写上 # java env JAVA_HOME=/usr/local/tools/java   (j ...

  6. mysql索引 ->创建索引、修改索引、删除索引的命令语句

    查看表中已经存在 index:show index from table_name; 创建和删除索引索引的创建可以在CREATE TABLE语句中进行,也可以单独用CREATE INDEX或ALTER ...

  7. nio 序列化

    1.序列化 public class SerializeUtils<T extends Serializable> { public byte[] serialize(T t) { byt ...

  8. 高性能消息中间件——NATS

    前 言 这段时间我的主要工作内容是将公司系统中使用的RabbitMQ替换成NATS,而此之前我对Nats一无所知.经过一段时间紧张的学习和开发之后我顺利的完成了任务,并对消息中间件有了更深的了解.在此 ...

  9. 版本控制git第一篇

    一.git的下载与安装 参考:https://blog.51cto.com/wangfeng7399/2352524 Git 是一个开源的分布式版本控制软件,用以有效.高速的处理从很小到非常大的项目版 ...

  10. jmeter接口测试基础知识2.0

    如何在jmeter中上传文件:选择post方式后,选择FILES Upload--文件名称栏点击浏览,值栏写file,如果查看的时候报错,就在MIME类型中写TXT 参数化:添加学生信息:进行参数化1 ...