在input输入框type等于number的时候,我设置的maxLength失效了

首先当你设置maxLength的时候,那么就是肯定没有搞清他的这个含义了,maxLength 是针对文本的输入情况的

当你把input:type =number的时候 他就用错了地方了

可以通过js来控制哈 

<input type="number">

下面就是js代码

var maxLength=6;
        var input=document.querySelector('input[type=number]');
        input.addEventListener('input',function(){
            this.value=this.value.slice(0,maxLength)
        })

这里再加一个小知识  哈 有的时候 我们在输入手机号的 时候 会有下面的俩种需求

133 3333 3333 或者 133-3333-3333

要不中间是空格 要不中间是 横线相连

其实这个也很简单的  传入对象  和要求的  是空格 还是 横线的类型就行了

function inputRule(el,type){
            el.addEventListener('keydown',function(e){
                var value=this.value;
                if((value.length==3||value.length==8)&&e.keyCode!=8){
                    value+=type;
                    this.value=value;
                }
            })
        }

2.为什么工作中很少见到使用 input:number 其实还是因为存在兼容性问题 

不是说 input:number 是只能输入数字的是吧  但这个 童鞋可以输入一个  字母  e试试看 是不是能输入呢 

这个是为什么呢  因为 e也是表示 表示 十进制的 在计算机中

所以当你使用这个时候还是要过滤一下和

value.repalce(/\d/g,''); 使用正则家上 repace即可   

原创文章 288 获赞 101 访问量 4万+

猜你喜欢

转载自blog.csdn.net/yunchong_zhao/article/details/105717242