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

最近遇到一个需求，需要限制文本框输入数字，而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, '')
+   // 只保留第一个“点”号, 清除多余的
+   const idx = val.indexOf('.')
+   if (!(idx === -1 || idx === val.length - 1)) {
+     val = val.substr(0, idx) + '.' + val.substr(idx + 1).replace(/\./g, '')
+   }
+   // 第一个字符如果是.号，则补充前缀0
+   val = val.replace(/^\./g, '0.')
+  } else {
    val = ele.value.replace(/[^\-\d]/g, '').replace(/^(\-)*(\d*)$/, '$1$2')
  }
  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, '')
  // 只保留第一个“点”号, 清除多余的
  const idx = val.indexOf('.')
  if (!(idx === -1 || idx === val.length - 1)) {
    val = val.substr(0, idx) + '.' + val.substr(idx + 1).replace(/\./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, '')
  // 只保留第一个“点”号, 清除多余的
  const idx = val.indexOf('.')
  if (!(idx === -1 || idx === val.length - 1)) {
    val = val.substr(0, idx) + '.' + val.substr(idx + 1).replace(/\./g, '')
  }
+ // 只保留首位的负号, 清除多余的
+ if (val.length > 1) {
+   val = val.charAt(0) + val.substr(1).replace(/-/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, '').replace(/^(\-)*(\d*)$/, '$1$2')
  }
  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, '')
  // 只保留第一个“点”号, 清除多余的
  const idx = val.indexOf('.')
  if (!(idx === -1 || idx === val.length - 1)) {
    val = val.substr(0, idx) + '.' + val.substr(idx + 1).replace(/\./g, '')
  }
  // 只保留首位的负号, 清除多余的
  if (val.length > 1) {
    val = val.charAt(0) + val.substr(1).replace(/-/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, '').replace(/^(\-)*(\d*)$/, '$1$2')
  }
+ 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))
}

最后编辑于：2020.04.24 19:24:02

人面猴
序言：七十年代末，一起剥皮案震惊了整个滨河市，随后出现的几起案子，更是在滨河造成了极大的恐慌，老刑警刘岩，带你破解...
沈念sama阅读 194,524评论 5赞 460
死咒
序言：滨河连续发生了三起死亡事件，死亡现场离奇诡异，居然都是意外死亡，警方通过查阅死者的电脑和手机，发现死者居然都...
沈念sama阅读 81,869评论 2赞 371
救了他两次的神仙让他今天三更去死
文/潘晓璐我一进店门，熙熙楼的掌柜王于贵愁眉苦脸地迎上来，“玉大人，你说我怎么就摊上这事。” “怎么了？”我有些...
开封第一讲书人阅读 141,813评论 0赞 320
道士缉凶录：失踪的卖姜人
文/不坏的土叔我叫张陵，是天一观的道长。经常有香客问我，道长，这世上最难降的妖魔是什么？我笑而不...
开封第一讲书人阅读 52,210评论 1赞 263
港岛之恋（遗憾婚礼）
正文为了忘掉前任，我火速办了婚礼，结果婚礼上，老公的妹妹穿的比我还像新娘。我一直安慰自己，他们只是感情好，可当我...
茶点故事阅读 61,085评论 4赞 355
恶毒庶女顶嫁案：这布局不是一般人想出来的
文/花漫我一把揭开白布。她就那样静静地躺着，像睡着了一般。火红的嫁衣衬着肌肤如雪。梳的纹丝不乱的头发上，一...
开封第一讲书人阅读 46,117评论 1赞 272
城市分裂传说
那天，我揣着相机与录音，去河边找鬼。笑死，一个胖子当着我的面吹牛，可吹牛的内容都是我干的。我是一名探鬼主播，决...
沈念sama阅读 36,533评论 3赞 381
双鸳鸯连环套：你想象不到人心有多黑
文/苍兰香墨我猛地睁开眼，长吁一口气：“原来是场噩梦啊……” “哼！你这毒妇竟也来了？” 一声冷哼从身侧响起，我...
开封第一讲书人阅读 35,219评论 0赞 253
万荣杀人案实录
序言：老挝万荣一对情侣失踪，失踪者是张志新（化名）和其女友刘颖，没想到半个月后，有当地人在树林里发现了一具尸体，经...
沈念sama阅读 39,487评论 1赞 290
护林员之死
正文独居荒郊野岭守林人离奇死亡，尸身上长有42处带血的脓包…… 初始之章·张勋以下内容为张勋视角年9月15日...
茶点故事阅读 34,582评论 2赞 309
白月光启示录
正文我和宋清朗相恋三年，在试婚纱的时候发现自己被绿了。大学时的朋友给我发了我未婚夫和他白月光在一起吃饭的照片。...
茶点故事阅读 36,362评论 1赞 326
活死人
序言：一个原本活蹦乱跳的男人离奇死亡，死状恐怖，灵堂内的尸体忽然破棺而出，到底是诈尸还是另有隐情，我是刑警宁泽，带...
沈念sama阅读 32,218评论 3赞 312
日本核电站爆炸内幕
正文年R本政府宣布，位于F岛的核电站，受9级特大地震影响，放射性物质发生泄漏。R本人自食恶果不足惜，却给世界环境...
茶点故事阅读 37,589评论 3赞 299
男人毒药：我在死后第九天来索命
文/蒙蒙一、第九天我趴在偏房一处隐蔽的房顶上张望。院中可真热闹，春花似锦、人声如沸。这庄子的主人今日做“春日...
开封第一讲书人阅读 28,899评论 0赞 17
一桩弑父案，背后竟有这般阴谋
文/苍兰香墨我抬头看了看天上的太阳。三九已至，却和暖如春，着一层夹袄步出监牢的瞬间，已是汗流浃背。一阵脚步声响...
开封第一讲书人阅读 30,176评论 1赞 250
情欲美人皮
我被黑心中介骗来泰国打工，没想到刚下飞机就差点儿被人妖公主榨干…… 1. 我叫王不留，地道东北人。一个月前我还...
沈念sama阅读 41,503评论 2赞 341
代替公主和亲
正文我出身青楼，却偏偏与公主长得像，于是被迫代替她去往敌国和亲。传闻我的和亲对象是个残疾皇子，可洞房花烛夜当晚...
茶点故事阅读 40,707评论 2赞 335

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

事件选型

初步实现

封装成指令

支持浮点数

支持小数保留位最大位数限制

支持负数

支持输入的最大值和最小值的限制

结语

推荐阅读更多精彩内容