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就不起作用了.然后我就去百度了一下, ...
随机推荐
- Redhat配置yum源(使用阿里云yum Repo)
1. 查看版本号和系统类别: cat /etc/redhat-release archor cat /etc/issue && arch 2.检查yum是否安装,以及安装了哪些依赖源并 ...
- [Spring MVC] 取控制器返回的ModelAndView/Map/Model/Request的对象
${key }页面可取, <input value="${key}"> 或者<%=request.getParameter("key")%&g ...
- PAC-based methods
PAC 主成分分析 主要的几个步骤: 线性变换,线性无关,主要线性分量(方差加大的方向),求主要线性分量的表达式 其中线性变换的概念(一个矩阵与一个列向量A相乘,等到一个新的列向量B,则称该矩阵为列向 ...
- java poi excel操作 把第一列放到最后去
@Override public void adjustExcleColumnPosition(String filePath,int col) throws Exception{ File file ...
- vue render里面的nativeOn
vue render里面的nativeOn的解释官方的解释是:// 仅对于组件,用于监听原生事件,而不是组件内部使用 `vm.$emit` 触发的事件. 官方的解释比较抽象 个人理解: 父组件要在子组 ...
- 机器学习 之LightGBM算法
目录 1.基本知识点简介 2.LightGBM轻量级提升学习方法 2.1 leaf-wise分裂策略 2.2 基于直方图的排序算法 2.3 支持类别特征和高效并行处理 1.基本知识点简介 在集成学习的 ...
- 索引(B-树)
前言 本文是在讲述什么样的数据结构适合作为索引,以及其适合作为索引的原因.而阅读本文需要对B树和B+树结构有稍微的理解.以及需要对磁盘操作知识有稍微的了解.对于磁盘操作的相关知识,在文章尾部的链接文章 ...
- mac 配置php+php_fpm+nginx
首先brew安装前面文章上有的 安装nginx brew install nginx #启动nginx sudo nginx #测试配置是否有语法错误 sudo nginx -t 测试成功 如果不加 ...
- day17_python_1124
01 昨日内容回顾 包: 1,在内存中创建一个以包命名的空间. 2,执行包的__init__文件将文件中的名字加载到包的名称空间. 3,通过包名.名字(变量,函数,类名)方式调用这些内容. aaa.x ...
- 201621123075 week5 继承、多态、抽象类和接口
1. 本周学习总结 1.1 写出你认为本周学习中比较重要的知识点关键词 接口.abstract.implements.comparable 1.2 尝试使用思维导图将这些关键词组织起来.注:思维导图一 ...