最近遇到一个需求,需要限制文本框输入数字,而number类型的输入框有箭头,个人不是很喜欢,因此想要寻求其它途径实现。本想通过网上找个现成的插件,然而百度,谷歌一番都没有找到满意的答案,至于随手一搜出来的方案或多或少都有点缺陷。因此自己动手,丰衣足食。
首先我们很容易想到通过事件来达到目的,大致可以通过以下几个事件来实现:
综合各种方案的优缺点,选定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 采用 IEEE 754 标准,数值存储为64位双精度格式,数值精度最多可以达到 53 个二进制位(1 个隐藏位与 52 个有效位)。如果数值的精度超过这个限度,第54位及后面的位就会被丢弃.
由于js的弱精度,在计算小数相加时总是会丢失精度,JS将金额数字转大写的方法封装,数字大写对照表;下面为大家整理些常用的实现方法。
isNaN()的缺点就在于 null、空格以及空串会被按照0来处理;对于空数组和只有一个数值成员的数组,isNaN返回false。校验只要是数字(包含正负整数,0以及正负浮点数)就返回true
JavaScript 中浮点型精度的误差,是非常基础但是却又经常不被重视的问题。文中分享的方案,足以覆盖项目中的所有情况,但如果用在其它地方或项目中,在一些极端情况下可能会有问题。
最近在看计算机组成原理的浮点数部分,突然想起之前看过的一道快手面试题,为什么JS中0.1+0.2不等于0.3,应该如何解决?这里我们可以借这道题来说一下JS的精度问题
Infinity(无穷大)在 JS 中是一个特殊的数字,它的特性是:它比任何有限的数字都大,如果不知道 Infinity, 我们在一些运算操作遇到时,就会觉得很有意思。现在我们来看看 JS 中的Infinity 属性,了解用例并解决一些常见的陷阱。
这是一种通用方法,我们首先检查数字是已经是正数还是负数,如果数字是负数,那么我们将数字乘以-1以使其为正数。使用Math.abs()方法将负数转换为正数。
如果想要将一个字符串中的数字给提取出来,这要怎么做? 在JavaScript中可以使用match()方法将字符串中的数字提取到数字数组中。此方法将正则表达式作为参数,并从字符串中提取数字。使用match()方法提取数字分两种情况:
javascript如何判断一个值是否是数字?下面本篇文章就来给大家介绍一下使用javascript判断一个值是否是数字的方法,sNaN() 函数用于检查其参数是否是非数字值。如果 值x 是特殊的非数字值 NaN
JavaScript判断两个整数(a,b,a>b)的整除时,可以用Number.isInteger(a/b)或者a%b==0来进行判断,但是如果其中涉及到小数就会导致计算过程中精度丢失。
内容以共享、参考、研究为目的,不存在任何商业目的。其版权属原作者所有,如有侵权或违规,请与小编联系!情况属实本人将予以删除!