浅谈vue限制文本框输入数字的正确姿势
最近遇到一个需求,需要限制文本框输入数字,而number类型的输入框有箭头,个人不是很喜欢,因此想要寻求其它途径实现。本想通过网上找个现成的插件,然而百度,谷歌一番都没有找到满意的答案,至于随手一搜出来的方案或多或少都有点缺陷。因此自己动手,丰衣足食。
事件选型
首先我们很容易想到通过事件来达到目的,大致可以通过以下几个事件来实现:
- keypress/keydown
思路:按键按下的时候触发,通过判断按下的是否是数字返回true/false来限制用户的输入。
缺点:无法限制用户复制粘贴的数据。
- keyup
思路:同keypress事件,区别在于按键摁下弹起的时候触发。
缺点:从界面上看有个回退(显示用户输入的不合法字符之后删除回退)的现象,不是很自然。
- input
思路:用户输入的时候触发
优点:可以在用户复制粘贴的时候获取到完整的值,同时不会有界面回退的现象。
初步实现
综合各种方案的优缺点,选定input事件来实现,首先我们来实现最简单的限制用户只能输入正整数。代码如下:
但是,此方法有的时候没有很好地达到预期效果,这边我放到最后再来讲。
封装成指令
通过自定义指令来增加相应DOM的特性,使其支持文本输入限制。
functiononInput(el,ele,binding,vnode){ functionhandle(){ //只保留数字 ele.value=ele.value.replace(/[^\d]/g,'') } returnhandle } constnumberInput={ bind(el,binding,vnode){ constele=el.tagName==='INPUT'?el:el.querySelector('input') ele.addEventListener('input',onInput(el,ele,binding,vnode),false) }, } Vue.directive('number-input',numberInput)
使用方法:
支持浮点数
我们知道v-model指令有三种修饰符lazy, number,trim实现了不同的功能,这边呢,也想通过v-number-input.float的方式达到支持浮点数的目的。
修改handle回调,增加浮点数的支持
functionhandle(){ +letval=ele.value +//modifiers为修饰符对象,传入了float,则其float属性为true +if(binding.modifiers.float){ +//清除"数字"和"."以外的字符 +val=val.replace(/[^\d.]/g,'') +//只保留第一个,清除多余的 +val=val.replace(/\.{2,}/g,'.') +//第一个字符如果是.号,则补充前缀0 +val=val.replace(/^\./g,'0.') +}else{ val=ele.value.replace(/[^\d]/g,'') } ele.value=val }
使用方法:
支持小数保留位最大位数限制
查阅官方文档可知,指令支持参数的传递,这边我们期望通过参数传递小数点保留位数的配置
functionhandle(){ letval=ele.value //modifiers为修饰符对象,传入了float,则其float属性为true if(binding.modifiers.float){ //清除"数字"和"."以外的字符 val=val.replace(/[^\d.]/g,'') //只保留第一个,清除多余的 val=val.replace(/\.{2,}/g,'.') //第一个字符如果是.号,则补充前缀0 val=val.replace(/^\./g,'0.') +if(typeofbinding.value!=='undefined'){ +//期望保留的最大小数位数 +letpointKeep=0 +if(typeofbinding.value==='string' +||typeofbinding.value==='number'){ +pointKeep=parseInt(binding.value) +} +if(!isNaN(pointKeep)){ +if(!Number.isInteger(pointKeep) +||pointKeep<0){ +pointKeep=0 +} +conststr='^(\\d+)\\.(\\d\{'+pointKeep+'}).*$' +constreg=newRegExp(str) +if(pointKeep===0){ +//不需要小数点 +val=val.replace(reg,'$1') +}else{ +//通过正则保留小数点后指定的位数 +val=val.replace(reg,'$1.$2') +} +} }else{ val=ele.value.replace(/[^\d]/g,'') } ele.value=val }
使用方法:
//最多支持保留2位小数
支持负数
对正则稍加修改,只保留开头的负号,使其支持负数
functionhandle(){ letval=ele.value //modifiers为修饰符对象,传入了float,则其float属性为true if(binding.modifiers.float){ //清除"数字"和"."以及"-"以外的字符 +val=val.replace(/[^\-\d.]/g,'') //只保留第一个'-'号 +val=val.replace(/\.{2,}/g,'.').replace(/\-{2,}/g,'-') //将'-.'替换成'-0.' +val=val.replace(/^\./g,'0.').replace(/^\-\./,'-0.') if(typeofbinding.value!=='undefined'){ //期望保留的最大小数位数 letpointKeep=0 if(typeofbinding.value==='string' ||typeofbinding.value==='number'){ pointKeep=parseInt(binding.value) } if(!isNaN(pointKeep)){ if(!Number.isInteger(pointKeep) ||pointKeep<0){ pointKeep=0 } //增加'-'号的支持 +conststr='^(\\-)*(\\d+)\\.(\\d\{'+pointKeep+'}).*$' constreg=newRegExp(str) if(pointKeep===0){ //不需要小数点 +val=val.replace(reg,'$1$2') }else{ //通过正则保留小数点后指定的位数 +val=val.replace(reg,'$1$2.$3') } } }else{ val=ele.value.replace(/[^\d]/g,'') } ele.value=val }
支持输入的最大值和最小值的限制
指令的参数支持对象的传递,因此这边我们通过对象的字段配置最大数和最小值的配置。定义如下:
{ min:{type:number}, max:{type:number}, //最大小数位,仅在float下有效 decimal:{type:number} }
functionhandle(){ letval=ele.value //modifiers为修饰符对象,传入了float,则其float属性为true if(binding.modifiers.float){ //清除"数字"和"."以及"-"以外的字符 val=val.replace(/[^\-\d.]/g,'') //只保留第一个'-'号 val=val.replace(/\.{2,}/g,'.').replace(/\-{2,}/g,'-') //将'-.'替换成'-0.' val=val.replace(/^\./g,'0.').replace(/^\-\./,'-0.') if(typeofbinding.value!=='undefined'){ //期望保留的最大小数位数 letpointKeep=0 if(typeofbinding.value==='string' ||typeofbinding.value==='number'){ pointKeep=parseInt(binding.value) +}elseif(typeofbinding.value==='object'){ +//支持新的小数点保留位配置 +pointKeep=binding.value.decimal } if(!isNaN(pointKeep)){ if(!Number.isInteger(pointKeep) ||pointKeep<0){ pointKeep=0 } //增加'-'号的支持 conststr='^(\\-)*(\\d+)\\.(\\d\{'+pointKeep+'}).*$' constreg=newRegExp(str) if(pointKeep===0){ //不需要小数点 val=val.replace(reg,'$1$2') }else{ //通过正则保留小数点后指定的位数 val=val.replace(reg,'$1$2.$3') } } }else{ val=ele.value.replace(/[^\d]/g,'') } +if(val!==''&&typeofbinding.value==='object'){ +let{min,max}=binding.value +min=parseFloat(min) +max=parseFloat(max) +if(!isNaN(min)){ +if(min>=0){ +//不能是负数 +val=val.replace('-','') +} +if(parseFloat(val)max){ +val=max +} +} +} ele.value=val }
使用方法:
//最小为0
结语
至此我们的功能已经实现得差不多了,上述代码已经足以应对我们的大多数的需求了。但在我发现某些场景下有的时候键入非数字时,表单验证获取的数值仍然是我键入的字符而非空值,导致非空验证不正确。但是这种情况并非必现的,我猜想可能是因为是vue的model数据未同步导致的,因此在上述回调函数添加上以下代码,手动触发数据的双向绑定。
if(vnode.componentInstance){ vnode.componentInstance.$emit('input',ele.value) }else{ vnode.elm.dispatchEvent(newCustomEvent('input',ele.value)) }
以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持毛票票。