最近遇到一个需求, 需要限制文本框输入数字, 而 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)) }
来源: http://www.jianshu.com/p/8a2079fe5895