input输入框中保持仅能输入数字,禁止输入+、-、e,保留固定小数位长度
在日常的开发中会遇到表单中输入金额的实例,这时候财务会让我们保留输入框金额小数点固定位数,如果仅仅适用<input type='number'> 是没办法直接做到的,会将+、-、e识别位数字的一种,随意这时候就需要我们单独处理,下面的例子以vue2 结合ElementUI 编写:<template><input v-model="item.amount"type="n
·
在日常的开发中会遇到表单中输入金额的实例,这时候财务会让我们保留输入框金额小数点固定位数,如果仅仅适用<input type='number'>
是没办法直接做到的,会将+、-、e识别位数字的一种,随意这时候就需要我们单独处理,下面的例子以vue2 结合ElementUI 编写:
<template>
<input v-model="item.amount"
type="number"
@input="(value)=>onChange(list)"
@keydown="onKeydown"></input>
<!--是用框架中的组件时如果框架没有封装相关事件方法,可以在方法后添加`.native`
如:<el-input v-model="item.amount" @keydown.native="onKeydown"/>-->
</template>
<script>
export default {
data (){
return{
list:{
item:''
}
}
},
methods:{
onChange(list){
// 判断是否有小数点,并利用第一个小数点进行定位,只允许输入一位小数
if (list.item.indexOf('.') > -1) {
let positionIndex = list.item.indexOf('.');
list.item = list.item.substr(0, positionIndex + 2);
}
},
onKeydown(e){
// 输入框中禁止输入e、+、-
let key = e.key;
if (key === 'e' || key === 'E' || key === '+' || key === '-') {
e.returnValue = false;
} else {
e.returnValue = true;
}
}
}
}
</script>
参考文章https://dlsjf.top/Home/Blog/Article?id=2971
但是这样的方式也有一定的缺陷,就是用户如果使用中文输入法输入e,然后按enter,或者粘贴e还是可以输入进去,如果有好的解决方案可以留言探讨
更多推荐
已为社区贡献3条内容
所有评论(0)