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

日期:2020-05-07编辑作者:Web前端

时间: 2019-09-06阅读: 279标签: 数字

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

支持负数

www.129028.com金沙,对正则稍加修改,只保留开头的负号,使其支持负数

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}

使用方法:

// 最小为0el-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))}

本文由www.129028.com金沙发布于Web前端,转载请注明出处:vue限制文本框输入数字的正确姿势

关键词:

Web前端优化www.129028.com金沙

时间: 2019-09-07阅读: 175标签: 性能前端需要性能优化么? 一、Web前端优化最佳实践之 内容 性能优化一直以来都是前端...

详细>>

www.129028.com金沙学习掌握__proto__与prototype

时间: 2019-09-08阅读: 87标签: prototype一,前言 理解 javascript 的原型链及继承 class Shape{}class Circle extends Shape{}const circle...

详细>>

jQuery选择器

时间: 2019-09-10阅读: 190标签: 选择器 选择器是Query的一个核心基础,正是有了各种丰富的选择器,才使得开发人员可以...

详细>>

Css媒体查询以及常用设置www.129028.com金沙

或者 rem是相对单位,px为固定单位。rem相对于根元素(html)定义的font-size大小而言。 @media 媒体类型 and|not|only (媒体特性...

详细>>