浅谈vue限制文本框输入数字的正确姿势

2023-08-15 11:33:04 269

最近遇到一个需求，需要限制文本框输入数字，而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))
}

以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持毛票票。

浅谈vue限制文本框输入数字的正确姿势

热门推荐

随机推荐