vue中如何限制文本框输入数字
这篇文章主要介绍“vue中如何限制文本框输入数字”，在日常操作中，相信很多人在vue中如何限制文本框输入数字问题上存在疑惑，小编查阅了各式资料，整理出简单好用的操作方法，希望对大家解答”vue中如何限制文本框输入数字”的疑惑有所帮助！接下来，请跟着小编一起来学习吧！
尼开远网站制作公司哪家好，找创新互联建站！从网页设计、网站建设、微信开发、APP开发、成都响应式网站建设公司等网站项目制作，到程序开发，运营维护。创新互联建站从2013年开始到现在10年的时间，我们拥有了丰富的建站经验和运维经验，来保证我们的工作的顺利进行。专注于网站建设就选创新互联建站。
事件选型
首先我们很容易想到通过事件来达到目的，大致可以通过以下几个事件来实现：
keypress/keydown
思路：按键按下的时候触发，通过判断按下的是否是数字返回true/false来限制用户的输入。
缺点：无法限制用户复制粘贴的数据。
keyup
思路：同keypress事件，区别在于按键摁下弹起的时候触发。
缺点：从界面上看有个回退（显示用户输入的 不合法字符之后删除回退）的现象，不是很自然。
input
思路：用户输入的时候触发
优点：可以在用户复制粘贴的时候获取到完整的值，同时不会有界面回退的现象。
初步实现
综合各种方案的优缺点，选定input事件来实现，首先我们来实现最简单的限制用户只能输入正整数。代码如下：
但是，此方法有的时候没有很好地达到预期效果，这边我放到最后再来讲。
封装成指令
通过自定义指令来增加相应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)使用方法：
支持浮点数
我们知道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
}使用方法：
支持小数保留位最大位数限制
查阅官方文档可知，指令支持参数的传递，这边我们期望通过参数传递小数点保留位数的配置
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位小数
支持负数
对正则稍加修改，只保留开头的负号，使其支持负数
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
结语
至此我们的功能已经实现得差不多了，上述代码已经足以应对我们的大多数的需求了。但在我发现某些场景下有的时候键入非数字时，表单验证获取的数值仍然是我键入的字符而非空值，导致非空验证不正确。但是这种情况并非必现的，我猜想可能是因为是vue的model数据未同步导致的，因此在上述回调函数添加上以下代码，手动触发数据的双向绑定。
if (vnode.componentInstance) {
vnode.componentInstance.$emit('input', ele.value)
} else {
vnode.elm.dispatchEvent(new CustomEvent('input', ele.value))
}到此，关于“vue中如何限制文本框输入数字”的学习就结束了，希望能够解决大家的疑惑。理论与实践的搭配能更好的帮助大家学习，快去试试吧！若想继续学习更多相关知识，请继续关注创新互联网站，小编会继续努力为大家带来更多实用的文章！
分享名称：vue中如何限制文本框输入数字
转载来于：http://6mz.cn/article/igdepe.html