浅谈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 相关文章推荐
safari,opera嵌入iframe页面cookie读取问题解决方法
Jun 23 Javascript
HTML DOM的nodeType值介绍
Mar 31 Javascript
Javascript 命名空间模式
Nov 01 Javascript
js数组操作学习总结
Nov 04 Javascript
基于jQuery的图片不完全按比例自动缩小
Jul 11 Javascript
跟我学习javascript的浮点数精度
Nov 16 Javascript
JS中如何实现复选框全选功能
Dec 19 Javascript
JS实现身份证输入框的输入效果
Aug 21 Javascript
vue中使用mxgraph的方法实例代码详解
May 17 Javascript
DatePickerDialog 自定义样式及使用全解
Jul 09 Javascript
Javascript组合继承方法代码实例解析
Apr 02 Javascript
基于JS实现table导出Excel并保留样式
May 19 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
mysql 搜索之简单应用
2007/04/27 PHP
set_include_path在win和linux下的区别
2008/01/10 PHP
PHP获取浏览器信息类和客户端地理位置的2个方法
2014/04/24 PHP
PHP开发注意事项总结
2015/02/04 PHP
PHP实现仿百度文库,豆丁在线文档效果(word,excel,ppt转flash)
2016/03/10 PHP
JavaScript 常见对象类创建代码与优缺点分析
2009/12/07 Javascript
jQuery学习5 jQuery事件模型
2010/02/07 Javascript
jQuery实现设置、移除文本框默认值功能
2015/01/13 Javascript
jquery+html5烂漫爱心表白动画代码分享
2015/08/24 Javascript
正则表达式(语法篇推荐)
2016/06/24 Javascript
什么是JavaScript注入攻击?
2016/09/14 Javascript
详解jQuery简单的表单应用
2016/12/16 Javascript
bootstrap输入框组件使用方法详解
2017/01/19 Javascript
jQuery Tree Multiselect使用详解
2017/05/02 jQuery
微信小程序-getUserInfo回调的实例详解
2017/10/27 Javascript
JavaScript设计模式之职责链模式应用示例
2018/08/07 Javascript
零基础写python爬虫之抓取百度贴吧代码分享
2014/11/06 Python
django 自定义用户user模型的三种方法
2014/11/18 Python
Python 元类实例解析
2018/04/04 Python
Windows下将Python文件打包成.EXE可执行文件的方法
2018/08/03 Python
python爬取代理ip的示例
2020/12/18 Python
css3 矩阵的使用详解
2018/03/20 HTML / CSS
艺术系大学生毕业个人自我评价
2013/09/19 职场文书
工作的心得体会
2013/12/31 职场文书
个人求职信范例
2014/01/29 职场文书
教师绩效工资方案
2014/02/01 职场文书
应用数学专业求职信
2014/03/14 职场文书
大型会议策划方案
2014/05/17 职场文书
文化产业实施方案
2014/06/07 职场文书
财务部副经理岗位职责范本
2014/06/17 职场文书
教育局党的群众路线教育实践活动整改方案
2014/09/20 职场文书
缓刑人员思想汇报
2014/10/11 职场文书
2014年保安个人工作总结
2014/11/13 职场文书
2015年政治教研组工作总结
2015/07/22 职场文书
python读取pdf格式文档的实现代码
2021/04/01 Python
Python+DeOldify实现老照片上色功能
2022/06/21 Python