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


Posted in Javascript onSeptember 02, 2019

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

以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持三水点靠木。

Javascript 相关文章推荐
js 设置选中行的样式的实现代码
May 24 Javascript
人人网javascript面试题 可以提前实现下
Jan 05 Javascript
javascript中this做事件参数相关问题解答
Mar 17 Javascript
css配合jquery美化 select
Nov 29 Javascript
利用JS判断用户是否上网(连接网络)
Dec 23 Javascript
JQuery设置获取下拉菜单某个选项的值(比较全)
Aug 05 Javascript
Javascript 实现放大镜效果实例详解
Dec 03 Javascript
jQuery ajax实现省市县三级联动
Mar 07 Javascript
除Console.log()外更多的Javascript调试命令
Jan 24 Javascript
小程序自定义模板实现吸顶功能
Jan 08 Javascript
vue 项目@change多个参数传值多个事件的操作
Jan 29 Vue.js
微信小程序实现拍照和相册选取图片
May 09 Javascript
Layui 带多选框表格监听事件以及按钮自动点击写法实例
Sep 02 #Javascript
layer父页获取弹出层输入框里面的值方法
Sep 02 #Javascript
详解element-ui表格中勾选checkbox,高亮当前行
Sep 02 #Javascript
详解基于Vue的支持数据双向绑定的select组件
Sep 02 #Javascript
layui当点击文本框时弹出选择框,显示选择内容的例子
Sep 02 #Javascript
Vue内部渲染视图的方法
Sep 02 #Javascript
一步一步实现Vue的响应式(对象观测)
Sep 02 #Javascript
You might like
杏林同学录(五)
2006/10/09 PHP
php session 预定义数组
2009/03/16 PHP
php + nginx项目中的权限详解
2017/05/23 PHP
Div自动滚动到末尾的代码
2008/10/26 Javascript
js中判断文本框是否为空的两种方法
2011/07/31 Javascript
jQuery获取Radio,CheckBox选择的Value值(示例代码)
2013/12/12 Javascript
js整数字符串转换为金额类型数据(示例代码)
2013/12/26 Javascript
js清空form表单中的内容示例
2014/05/20 Javascript
jquery+CSS3模拟Path2.0动画菜单效果代码
2015/08/31 Javascript
jQuery实现选项卡切换效果简单演示
2015/12/09 Javascript
js倒计时抢购实例
2015/12/20 Javascript
vue.js指令v-for使用及索引获取
2016/11/03 Javascript
ES6概念 Symbol toString()方法
2016/12/25 Javascript
vue中实现移动端的scroll滚动方法
2018/03/03 Javascript
VSCode中如何利用d.ts文件进行js智能提示
2018/04/13 Javascript
如何使用Node.js爬取任意网页资源并输出PDF文件到本地
2019/06/17 Javascript
Vue.js实现tab切换效果
2019/07/24 Javascript
javascript实现弹幕墙效果
2019/11/28 Javascript
vuex+axios+element-ui实现页面请求loading操作示例
2020/02/02 Javascript
JS canvas实现画板和签字板功能
2021/02/23 Javascript
SublimeText 2编译python出错的解决方法(The system cannot find the file specified)
2013/11/27 Python
python构建自定义回调函数详解
2017/06/20 Python
删除python pandas.DataFrame 的多重index实例
2018/06/08 Python
Python文件监听工具pyinotify与watchdog实例
2018/10/15 Python
使用Python自动化破解自定义字体混淆信息的方法实例
2019/02/13 Python
python下载库的步骤方法
2019/10/12 Python
利用Python小工具实现3秒钟将视频转换为音频
2019/10/29 Python
解决jupyter notebook 前面书写后面内容消失的问题
2020/04/13 Python
2021年的Python 时间轴和即将推出的功能详解
2020/07/27 Python
详解Python 中的容器 collections
2020/08/17 Python
俄罗斯香水和化妆品在线商店:Aroma-butik
2020/02/28 全球购物
写一个函数,求一个字符串的长度。在main函数中输入字符串,并输出其长度
2015/11/18 面试题
Python里面如何实现tuple和list的转换
2012/06/13 面试题
女大学生毕业找工作的自我评价
2013/10/03 职场文书
2016年12月份红领巾广播稿
2015/12/21 职场文书
Python OpenCV超详细讲解读取图像视频和网络摄像头
2022/04/02 Python