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

更新时间：2019年09月02日 10:50:38 作者：Jkanon

这篇文章主要介绍了vue限制文本框输入数字的正确姿势，文中通过示例代码介绍的非常详细，对大家的学习或者工作具有一定的参考学习价值，需要的朋友们下面随着小编来一起学习学习吧

最近遇到一个需求，需要限制文本框输入数字，而number类型的输入框有箭头，个人不是很喜欢，因此想要寻求其它途径实现。本想通过网上找个现成的插件，然而百度，谷歌一番都没有找到满意的答案，至于随手一搜出来的方案或多或少都有点缺陷。因此自己动手，丰衣足食。

事件选型

首先我们很容易想到通过事件来达到目的，大致可以通过以下几个事件来实现：

keypress/keydown

思路：按键按下的时候触发，通过判断按下的是否是数字返回true/false来限制用户的输入。
缺点：无法限制用户复制粘贴的数据。

keyup

思路：同keypress事件，区别在于按键摁下弹起的时候触发。
缺点：从界面上看有个回退（显示用户输入的不合法字符之后删除回退）的现象，不是很自然。

input

思路：用户输入的时候触发
优点：可以在用户复制粘贴的时候获取到完整的值，同时不会有界面回退的现象。

初步实现

综合各种方案的优缺点，选定input事件来实现，首先我们来实现最简单的限制用户只能输入正整数。代码如下：

<el-input v-model="model" oninput="value=value.replace(/[^\d]/g, '')" />

但是，此方法有的时候没有很好地达到预期效果，这边我放到最后再来讲。

封装成指令

通过自定义指令来增加相应DOM的特性，使其支持文本输入限制。

function onInput(el, ele, binding, vnode) {
 function handle() {
 // 只保留数字
 ele.value = ele.value.replace(/[^\d]/g, '')
 } 

 return handle
}
const numberInput= {
 bind(el, binding, vnode) {
 const ele = el.tagName === 'INPUT' ? el : el.querySelector('input')
 ele.addEventListener('input', onInput(el, ele, binding, vnode), false)
 },
}
Vue.directive('number-input', numberInput)

使用方法：

<el-input v-model="model" v-number-input />

支持浮点数

我们知道v-model指令有三种修饰符lazy, number, trim实现了不同的功能，这边呢，也想通过v-number-input.float的方式达到支持浮点数的目的。

修改handle回调，增加浮点数的支持

function handle() {
+ let val = 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
}

使用方法：

<el-input v-model="model" v-number-input.float />

支持小数保留位最大位数限制

查阅官方文档可知，指令支持参数的传递，这边我们期望通过参数传递小数点保留位数的配置

function handle() {
 let val = 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 (typeof binding.value !== 'undefined') {
+ // 期望保留的最大小数位数
+ let pointKeep = 0
+ if (typeof binding.value === 'string' 
+  || typeof binding.value === 'number') {
+  pointKeep = parseInt(binding.value)
+ }
+ if (!isNaN(pointKeep)) {
+  if (!Number.isInteger(pointKeep) 
+   || pointKeep < 0) {
+  pointKeep = 0
+  }
+  const str='^(\\d+)\\.(\\d\{' + pointKeep + '}).*$'
+  const reg=new RegExp(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位小数
<el-input v-model="model" v-number-input.float="2" />

支持负数

对正则稍加修改，只保留开头的负号，使其支持负数

function handle() {
 let val = 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 (typeof binding.value !== 'undefined') {
 // 期望保留的最大小数位数
 let pointKeep = 0
 if (typeof binding.value === 'string' 
   || typeof binding.value === 'number') {
  pointKeep = parseInt(binding.value)
 }
 if (!isNaN(pointKeep)) {
  if (!Number.isInteger(pointKeep) 
   || pointKeep < 0) {
  pointKeep = 0
  }
  // 增加'-'号的支持
+ const str='^(\\-)*(\\d+)\\.(\\d\{' + pointKeep + '}).*$'
  const reg=new RegExp(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}
}

function handle() {
 let val = 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 (typeof binding.value !== 'undefined') {
 // 期望保留的最大小数位数
 let pointKeep = 0
 if (typeof binding.value === 'string' 
   || typeof binding.value === 'number') {
  pointKeep = parseInt(binding.value)
+ } else if (typeof binding.value === 'object') {
+  // 支持新的小数点保留位配置
+  pointKeep = binding.value.decimal
 }
 if (!isNaN(pointKeep)) {
  if (!Number.isInteger(pointKeep) 
   || pointKeep < 0) {
  pointKeep = 0
  }
  // 增加'-'号的支持
  const str='^(\\-)*(\\d+)\\.(\\d\{' + pointKeep + '}).*$'
  const reg=new RegExp(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 !== '' && typeof binding.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) < min) {
+  val = min
+ }
+ }
+ if (!isNaN(max)) {
+ if (parseFloat(val) > max) {
+  val = max
+ }
+ }
+ }
 ele.value = val
}

使用方法：

// 最小为0
<el-input v-model="model" v-number-input="{ min: 0 }" />

结语

至此我们的功能已经实现得差不多了，上述代码已经足以应对我们的大多数的需求了。但在我发现某些场景下有的时候键入非数字时，表单验证获取的数值仍然是我键入的字符而非空值，导致非空验证不正确。但是这种情况并非必现的，我猜想可能是因为是vue的model数据未同步导致的，因此在上述回调函数添加上以下代码，手动触发数据的双向绑定。

if (vnode.componentInstance) {
 vnode.componentInstance.$emit('input', ele.value)
} else {
 vnode.elm.dispatchEvent(new CustomEvent('input', ele.value))
}

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

您可能感兴趣的文章:

Vue3中ref与reactive的详解与扩展
在vue3中对响应式数据的声明官方给出了ref()和reactive()这两种方式,下面这篇文章主要给大家介绍了关于Vue3中ref与reactive的相关资料,需要的朋友可以参考下
2021-06-06
vue项目代码格式规范设置参考指南
这篇文章主要给大家介绍了关于vue3简单封装input组件和统一表单数据的相关资料,不管你学习哪一门编程语言,相信大家都会略化这一部分,需要的朋友可以参考下
2022-05-05
vue+scss+element-ui实现表格表头斜杠一分为三方式
这篇文章主要介绍了vue+scss+element-ui实现表格表头斜杠一分为三方式,具有很好的参考价值,希望对大家有所帮助,如有错误或未考虑完全的地方,望不吝赐教
2024-08-08
elementPlus中的Autocomplete弹出层错位问题解决分析
这篇文章主要介绍了elementPlus中的Autocomplete弹出层错位问题解决分析，有需要的朋友可以借鉴参考下，希望能够有所帮助，祝大家多多进步，早日升职加薪
2023-07-07
vue中使用Echarts map图实现下钻至县级的思路详解
这篇文章主要介绍了vue中使用Echarts map图实现下钻至县级,需要注意的是，因为我是直接从 vue-cli2 直接跳到 vue-cli4 ，还奇怪怎么读取不到JSON，查找后才知道 vue-cli3 往后的项目基础架构对比旧版本有些区别，感兴趣的朋友跟随小编一起看看吧
2022-01-01
vue实现点击按钮“查看详情”弹窗展示详情列表操作
这篇文章主要介绍了vue实现点击按钮“查看详情”弹窗展示详情列表操作，具有很好的参考价值，希望对大家有所帮助。一起跟随小编过来看看吧
2020-09-09
Vue如何实现el-table多选样式变为单选效果
这篇文章主要介绍了Vue如何实现el-table多选样式变为单选效果,具有很好的参考价值,希望对大家有所帮助,如有错误或未考虑完全的地方,望不吝赐教
2024-05-05
详解Vue如何手写一个虚拟列表
虚拟列表是一种优化长列表渲染的技术,它可以在保持流畅性的同时,渲染大量的数据,本文主要介绍了如何使用vue手写一个虚拟列表,感兴趣的可以了解下
2024-04-04
详解vue-meta如何让你更优雅的管理头部标签
这篇文章主要介绍了详解vue-meta如何让你更优雅的管理头部标签，小编觉得挺不错的，现在分享给大家，也给大家做个参考。一起跟随小编过来看看吧
2018-01-01
Vue路由router详解
这篇文章主要介绍了vue router 配置路由的方法，小编觉得挺不错的，现在分享给大家，也给大家做个参考。一起跟随小编过来看看吧
2021-10-10

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

相关文章

最新评论

大家感兴趣的内容

最近更新的内容

常用在线小工具