这篇文章主要介绍了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如何限制文本框输入数字”这篇文章的内容就介绍到这里,感谢各位的阅读!相信大家对“vue如何限制文本框输入数字”知识都有一定的了解,大家如果还想学习更多知识,欢迎关注亿速云行业资讯频道。
免责声明:本站发布的内容(图片、视频和文字)以原创、转载和分享为主,文章观点不代表本网站立场,如果涉及侵权请联系站长邮箱:is@yisu.com进行举报,并提供相关证据,一经查实,将立刻删除涉嫌侵权内容。