有一个输入框，要求只能输入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. OpenGL.Tutorial16_ShadowMapping

    1. 2. In Tutorial 15 we learnt how to create lightmaps, which encompasses(包含) static lighting. While ...

  2. java笔记 -- 类与对象

    封装: 从形式上看, 封装是将数据和行为组合在一个包中, 并对对象的使用者隐藏了数据的实现方式. 对象中的数据称为实例域, 操纵数据的过程称为方法. 对于每个特定的类实例(对象)都有一组特定的实例域值 ...

  3. 函数式语言简介(functional language)

    1.什么是函数式语言?        是一种非冯·诺伊曼式的程序设计语言.函数式语言主要成分是原始函数.定义函数和函数型.这种语言具有较强的组织数据结构的能力,可以把某一数据结构(如数组)作为单一值处 ...

  4. [Java] 项目红色叹号 案例1则

    一般红色叹号是build path出错. 除了检查出错的library外,还要注意Order an Export选项中未勾选的Library. 之前导入项目后,没有勾选JRE和Maven Depend ...

  5. poj3613

    注意最短路转移的单位元是对角线为0,其它为INF. #include <iostream> #include <cstdio> #include <cmath> # ...

  6. css及HTML知识点

    html : 180°  输出为 css:    margin: 0 auto;会在页面水平居中显示  box-shadow: 0 0 5px #f61818; 设置投影的位置大小颜色 outline ...

  7. nlp基础（一）基本应用

    1.问答系统,它主要是针对那些有明确答案的用户问题,而且通常面向特定的领域,比如金融,医疗,这一类的机器人.它的技术实现方案分为基于检索和基于知识库两大类. 2.第二个任务型对话系统,大家看论文的时候 ...

  8. windows 和linux 文件互传

    1.sz +  文件   [拷贝到windows上] 2.rz + 文件 [拷贝到linux上]

  9. 手机端页面可以左右轻微拖动的bug

    在做项目的时候,必须要适应各种屏幕,移动端是必须的. 但是在移动端中,网站是左右可以动,怎么办呢? 这是只要在样式表中写入 html,body{overfow-x:hidden;} bug产生在H5的 ...

  10. Set集合中的treeSet问题：cannot be cast to java.lang.Comparable；

    使用TreeSet保存自定义对象时, 必须让定义对象的类实现Comparable接口,并重写compareTo()方法 否则报 实体类User:cannot be cast to java.lang. ...