限制input[type=number]的输入位数策略整理
当我们使用类型number的input输入框的时候,我们可能需要限制输入的位数,这个时候通常会想到maxlength,但是maxlength是在number类型的时候是不支持的,下面是一些解决这种问题的方法。
1)max和min
max和min是number输入框所支持的,这样如果我们要限制输入11位的手机号码,就可以用如下代码
<input type="number" max="99999999999" />
这样不会限制用户输入,但会在用户提交的时候提示。
[示例] https://jsfiddle.net/dahe/cyatq4aw/
2)oninput事件
对多余的位数进行slice处理,进行删除
myInput.oninput = function () {
if (this.value.length > 4) {
this.value = this.value.slice(0,4);
}
}
但是这还是和maxlength的逻辑略有不同,那就是当我们将光标挪到之前输入的数字之间的时候,我们就会发现,再输入数字,会导致最后面的数字被删除。
[示例] https://jsfiddle.net/dahe/893q05jr/
3)keydown
keydown事件可以帮助我们在按下数字之后,判断一下当前input中的value的位数,如果超过位数就return false,这样不管光标的位置在哪里,都不会输入新的数字。
<input type="number" onKeyDown="if(this.value.length==2) return false;" />
但是这会导致在满足2个数字的时候,再按删除键(或者说是所有按键)失效。╮(╯﹏╰)╭真的尴尬了
[示例] https://jsfiddle.net/dahe/haLLu33L/
4)借助keypress,keydown和oninput
<input name="myInput_DRS" onkeypress="return isNumeric(event)" onkeydown="return isMoreThan(event)" oninput="maxLengthCheck(this)" type="number" placeholder="Type..." min="1" max="999" /> <script>
function maxLengthCheck(object) {
if (object.value.length > object.max.length)
object.value = object.value.slice(0, object.max.length)
} function isNumeric(evt) {
var theEvent = evt || window.event;
var key = theEvent.keyCode || theEvent.which;
key = String.fromCharCode(key);
var regex = /[0-9]|\./;
if (!regex.test(key)) {
theEvent.returnValue = false;
if (theEvent.preventDefault) theEvent.preventDefault();
}
} function isMoreThan(evt) {
var theEvent = evt || window.event;
var target = theEvent.target;
var keyID = event.keyCode;
var isDelete = false;
switch (keyID) {
case 8:
isDelete = true;
// alert("backspace");
break;
case 46:
isDelete = true;
// alert("delete");
break;
default:
break;
} if (!isDelete && target.value.length == target.max.length) {
return false;
}
} </script>
[示例] https://jsfiddle.net/dahe/g3e686qx/
5)input parttern
<input type="text" pattern="\d*" maxlength="2">
但是兼容性不好,Internet Explorer 10、Firefox、Opera 和 Chrome 支持 pattern 属性。
注意:Safari 或者 Internet Explorer 9 及之前的版本不支持 <input> 标签的 pattern 属性。
[示例] https://jsfiddle.net/dahe/k9ta81ta/
6)input[type=tel]
在移动设备上,input[type=tel] 是支持maxlength的,而且只能输入数字键盘。
限制input[type=number]的输入位数策略整理的更多相关文章
- vue 限制input[type=number]的输入位数策略整理
https://blog.csdn.net/weistin/article/details/79664261 vue type="number 设置maxlength 是无效的 我们可以 ...
- 输入类型<input type="number"> / input标签的输入限制
输入限制 属性 描述 disabled 规定输入字段应该被禁用. max 规定输入字段的最大值. maxlength 规定输入字段的最大字符数. min 规定输入字段的最小值. pattern 规定通 ...
- 解决 html5 input type='number' 类型可以输入e
当给 input 设置类型为 number 时,比如,我想限制,只能输入 0-9 的正整数,正则表达式如下: /^[-]?$/ // 匹配 0-9 的整数且只匹配 0 次或 1 次 用正则测试,小数点 ...
- 【笔记】移动端H5数字键盘input type=number的处理(IOS和Android)
在Vue中的项目,基于VUX-UI开发,一个常见的需求: 1.金额输入框 2.弹出数字键盘 3.仅支持输入两位小数,限制最大11位数,不允许0开头 后续:与UI沟通后, 思路调整为限制输入,并减少正则 ...
- input[type=number]问题
有时候对于只能输入数字的表单会有想要写成input[type=number]但是其中有一个问题 <input type="text" name="code" ...
- 动手写个数字输入框1:input[type=number]的遗憾
前言 最近在用Polymer封装纯数字的输入框,开发过程中发现不少坑,也有很多值得研究的地方.本系列打算分4篇来叙述这段可歌可泣的踩坑经历: <动手写个数字输入框1:input[type=nu ...
- 兼容IE7、IE8、IE9的input type="number"插件
IE11版本好像才兼容input type="number",但是现在Win7版本操作系统下,很多人的IE版本都是IE7/8/9,所以为了体验就自己写了一个小插件,支持设置最大值. ...
- input type=number 禁止输入字符“e”的办法
输入框input,的type设置为number,本想只输入数字,但是字符“e”却能通过, 首先科普一下, <body> <input onkeypress="getCode ...
- 去掉 input type="number" 右边图标
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/ ...
随机推荐
- js修改样式表规则
<div>adasfsfs</div> <div id="div">adasfsfs</div> <div>adasfs ...
- Oracle的substr函数
一.Substr函数 substr(目标字符串,开始位置,长度) 注意:这里第三个参数:长度,相当于物理中的标量,没有方向性,所以不能用负值.虽然不报错,但是选择不出任何值出来(欢迎指正) 开始位置可 ...
- 学习MVC之租房网站(八)- 前台注册和登录
在上一篇<学习MVC之租房网站(七)-房源管理和配图上传>完成了在后台新增.编辑房源信息以及上传房源配图的功能.到此后台开发便告一段落了,开始实现前台的功能,也是从用户的登录.注册开始. ...
- JAVA中断机制详解
Java提供了中断机制,可以使用它来结束一个线程.这种机制要求线程检查它是否被中断了,然后决定是不是响应这个中断请求.线程允许忽略中断请求并继续执行.Java的中断是一种协作机制.也就是说调用线程对象 ...
- mybatis中传入一个List集合作为查询条件的参数
如果有一个查询参数有多个,用一个List集合传进去,这个mapper文件可以这么写 <select id="queryList04" resultType="map ...
- React入门---开始前的准备(上)-2
开始前准备: 1.安装配置nodeJs(nodeJS官网) 检查安装成功: node -v npm -v 2.使用NPM配置React开发环境 (1). 创建项目文件夹(创建文件夹时,文件夹名不要起为 ...
- Source Insignt注册码
分享一下google来的 呵呵 Source Insight,一个无比强大的工具.一个很好的查看代码的工具.到它的官网上去看一下,就知道,世界上基本上所有的大的软件公司,都在用这个工具.习惯了这个工具 ...
- 详谈JAVA中的file类与IO流
File类 位置于java.io包构造方法:File(String parent, String child)new file("d:\\","a.txt") ...
- MySQL中间件Atlas安装及使用
简介 Atlas是由 Qihoo 360公司Web平台部基础架构团队开发维护的一个基于MySQL协议的数据中间层项目.它在MySQL官方推出的MySQL-Proxy 0.8.2版本的基础上,修改了大量 ...
- offsetHeight/Width clientHeight/Width scrollHeight/Width等高宽算法
图解: jquery里的对应取法: clientHeight/Width:innerHeight/Width(), offsetHeight/Width: outerHeight/Width(). w ...