当我们使用类型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]的输入位数策略整理的更多相关文章

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

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

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

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

  3. 解决 html5 input type='number' 类型可以输入e

    当给 input 设置类型为 number 时,比如,我想限制,只能输入 0-9 的正整数,正则表达式如下: /^[-]?$/ // 匹配 0-9 的整数且只匹配 0 次或 1 次 用正则测试,小数点 ...

  4. 【笔记】移动端H5数字键盘input type=number的处理(IOS和Android)

    在Vue中的项目,基于VUX-UI开发,一个常见的需求: 1.金额输入框 2.弹出数字键盘 3.仅支持输入两位小数,限制最大11位数,不允许0开头 后续:与UI沟通后, 思路调整为限制输入,并减少正则 ...

  5. input[type=number]问题

    有时候对于只能输入数字的表单会有想要写成input[type=number]但是其中有一个问题 <input type="text" name="code" ...

  6. 动手写个数字输入框1:input[type=number]的遗憾

    前言  最近在用Polymer封装纯数字的输入框,开发过程中发现不少坑,也有很多值得研究的地方.本系列打算分4篇来叙述这段可歌可泣的踩坑经历: <动手写个数字输入框1:input[type=nu ...

  7. 兼容IE7、IE8、IE9的input type="number"插件

    IE11版本好像才兼容input type="number",但是现在Win7版本操作系统下,很多人的IE版本都是IE7/8/9,所以为了体验就自己写了一个小插件,支持设置最大值. ...

  8. input type=number 禁止输入字符“e”的办法

    输入框input,的type设置为number,本想只输入数字,但是字符“e”却能通过, 首先科普一下, <body> <input onkeypress="getCode ...

  9. 去掉 input type="number" 右边图标

    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/ ...

随机推荐

  1. js修改样式表规则

    <div>adasfsfs</div> <div id="div">adasfsfs</div> <div>adasfs ...

  2. Oracle的substr函数

    一.Substr函数 substr(目标字符串,开始位置,长度) 注意:这里第三个参数:长度,相当于物理中的标量,没有方向性,所以不能用负值.虽然不报错,但是选择不出任何值出来(欢迎指正) 开始位置可 ...

  3. 学习MVC之租房网站(八)- 前台注册和登录

    在上一篇<学习MVC之租房网站(七)-房源管理和配图上传>完成了在后台新增.编辑房源信息以及上传房源配图的功能.到此后台开发便告一段落了,开始实现前台的功能,也是从用户的登录.注册开始. ...

  4. JAVA中断机制详解

    Java提供了中断机制,可以使用它来结束一个线程.这种机制要求线程检查它是否被中断了,然后决定是不是响应这个中断请求.线程允许忽略中断请求并继续执行.Java的中断是一种协作机制.也就是说调用线程对象 ...

  5. mybatis中传入一个List集合作为查询条件的参数

    如果有一个查询参数有多个,用一个List集合传进去,这个mapper文件可以这么写 <select id="queryList04" resultType="map ...

  6. React入门---开始前的准备(上)-2

    开始前准备: 1.安装配置nodeJs(nodeJS官网) 检查安装成功: node -v npm -v 2.使用NPM配置React开发环境 (1). 创建项目文件夹(创建文件夹时,文件夹名不要起为 ...

  7. Source Insignt注册码

    分享一下google来的 呵呵 Source Insight,一个无比强大的工具.一个很好的查看代码的工具.到它的官网上去看一下,就知道,世界上基本上所有的大的软件公司,都在用这个工具.习惯了这个工具 ...

  8. 详谈JAVA中的file类与IO流

    File类 位置于java.io包构造方法:File(String parent, String child)new file("d:\\","a.txt") ...

  9. MySQL中间件Atlas安装及使用

    简介 Atlas是由 Qihoo 360公司Web平台部基础架构团队开发维护的一个基于MySQL协议的数据中间层项目.它在MySQL官方推出的MySQL-Proxy 0.8.2版本的基础上,修改了大量 ...

  10. offsetHeight/Width clientHeight/Width scrollHeight/Width等高宽算法

    图解: jquery里的对应取法: clientHeight/Width:innerHeight/Width(), offsetHeight/Width: outerHeight/Width(). w ...