vue中如何限制文本框输入数字

vue中如何限制文本框输入数字

这篇文章主要介绍“vue中如何限制文本框输入数字”，在日常操作中，相信很多人在vue中如何限制文本框输入数字问题上存在疑惑，小编查阅了各式资料，整理出简单好用的操作方法，希望对大家解答”vue中如何限制文本框输入数字”的疑惑有所帮助！接下来，请跟着小编一起来学习吧！

事件选型

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

• 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))  }

到此，关于“vue中如何限制文本框输入数字”的学习就结束了，希望能够解决大家的疑惑。理论与实践的搭配能更好的帮助大家学习，快去试试吧！若想继续学习更多相关知识，请继续关注高防服务器网网站，小编会继续努力为大家带来更多实用的文章！

[微信提示：高防服务器能助您降低 IT 成本，提升运维效率，使您更专注于核心业务创新。

[图文来源于网络，不代表本站立场，如有侵权，请联系高防服务器网删除]
[