input输入框中保持仅能输入数字,禁止输入+、-、e,保留固定小数位长度

在日常的开发中会遇到表单中输入金额的实例,这时候财务会让我们保留输入框金额小数点固定位数,如果仅仅适用<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
    点赞
  • 2
    收藏
    觉得还不错? 一键收藏
  • 1
    评论
如果你想在 `el-input` 组件使用 `replace` 方法来限制只能输入数字保留四位小数,你可以监听 `input` 事件,并在事件处理函数进行相应的处理。下面是一个示例代码: ```html <template> <el-input v-model="inputValue" @input="handleInput"></el-input> </template> <script> export default { data() { return { inputValue: '' }; }, methods: { handleInput() { // 替换非数字和非小数点的字符为空字符串 this.inputValue = this.inputValue.replace(/[^\d.]/g, ''); // 限制小数点后最多四位小数 const decimalIndex = this.inputValue.indexOf('.'); if (decimalIndex !== -1) { const decimalPart = this.inputValue.substr(decimalIndex + 1); if (decimalPart.length > 4) { this.inputValue = this.inputValue.substr(0, decimalIndex + 5); } } } } }; </script> ``` 在这个示例,我们在 `el-input` 组件上绑定了 `v-model`,将输入框的值与 `inputValue` 数据进行双向绑定。同时,我们监听了 `input` 事件,并在事件处理函数 `handleInput` 对用户输入进行处理。 在 `handleInput` 方法,我们首先使用正则表达式替换非数字和非小数点的字符为空字符串。然后,检查是否存在小数点,并且如果小数部分的长度超过了四位,则进行截断。最后,将处理后的值赋值给 `inputValue`,实现了只能输入数字保留四位小数的效果。 这样,用户在 `el-input` 文本框输入的值就会自动进行限制,只能数字并且最多保留四位小数。

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论 1
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值