在日常的开发中会遇到表单中输入金额的实例,这时候财务会让我们保留输入框金额小数点固定位数,如果仅仅适用<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还是可以输入进去,如果有好的解决方案可以留言探讨

Logo

前往低代码交流专区

更多推荐