当我们使用类型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. 利刃 MVVMLight 9:Messenger

    MVVM的目标之一就是为了解耦View和ViewModel.View负责视图展示,ViewModel负责业务逻辑处理,尽量保证 View.xaml.cs中的简洁,不包含复杂的业务逻辑代码. 但是在实际 ...

  2. 初识hadoop-历史及其家族(日志一)

    1,书籍推荐: 2,Google技术带来的东西: 下一篇:JDK的安装级其中遇到的问题

  3. Oracle之分组函数嵌套以及表连接

    --1 数据环境准备 scott 用户下面的emp,dept表 --2 要求 :求平均工资最高的部门编号,部门名称,部门平均工资 select d.deptno,d.dname,e.salfrom(s ...

  4. Java学习笔记——序列化和反序列化

    寒雨连江夜入吴,平明送客楚山孤. 洛阳亲友如相问,一片冰心在玉壶. --芙蓉楼送辛渐 持久化数据的第一种方式.在序列化之前也可以把数据打散逐行存储在文件中,然后在逐行读取. 比如定Student类 用 ...

  5. 个人对于epollhup的理解

    1.原因 由于最近对于异步connect函数的测试,发现提前将一个套接字加入epoll监听队列会不断爆出epollhup事件 2.示例 ........  iEpoll = epoll_create( ...

  6. centos修改无法用用户名和密码登录

    vi /etc/ssh/sshd_configPermitRootLogin这行改为PermitRootLogin yesPasswordAuthentication no上面的no改为yesUseP ...

  7. 欧拉函数之HDU1286找新朋友

    找新朋友 Time Limit : 2000/1000ms (Java/Other)   Memory Limit : 65536/32768K (Java/Other) Total Submissi ...

  8. OpenCV探索之路(十):图像修复技术

    在实际应用中,我们的图像常常会被噪声腐蚀,这些噪声或是镜头上的灰尘或水滴,或是旧照片的划痕,或者是图像遭到人为的涂画(比如马赛克)或者图像的部分本身已经损坏.如果我们想让这些受到破坏的额图片尽可能恢复 ...

  9. java面向对象--继承与多态

    可以为一个变异单元中的每个类创建一个main方法,只有命令行所调用的那个类的main方法才会被调用,这样方便进行单元测试.继承时,一般将所有的数据成员都指定为private,将所有的方法指定为publ ...

  10. ActionBar 通用方法

    自定义actionBar布局:标题居中,左边有返回按键 <?xml version="1.0" encoding="utf-8"?> <Rel ...