u-input 输入框失去焦点时 只保留2位小数

 <u-input
   placeholder="请输入金额(必填)"
    border="none"
		inputAlign='right'
		v-model="money"
		type='digit'
		@blur='onBlur'
  >
		<template slot="suffix">
			<view></view>
		</template>
</u-input>
// 输入框失去焦点时触发 互助费只能保留2位小数
onBlur(){
	this.money=this.money.replace(/^\D*(\d*(?:\.\d{0,2})?).*$/g, '$1');
	if (this.money!= ''){
		 this.money= parseFloat(this.money).toFixed(2);
	}else {
		 this.money= parseFloat(0).toFixed(2);
	}
},
### 实现 Vue3 中 `el-input` 组件仅允许输入数字并保留两位小数 为了实现这一功能,可以采用监听事件的方式,在用户每次修改输入框中的内容进行正则表达式的匹配和替换操作。下面是一个完整的解决方案: #### 使用 `oninput` 属性配合正则表达式过滤非法字符 通过设置 `oninput` 事件处理程序来实监控用户的输入行为,并利用 JavaScript 的正则表达式去除不符合条件的内容。 ```html <template> <div> <!-- 输入框 --> <el-input v-model="price" placeholder="请输入金额" oninput="this.value = this.value.match(/^\d*\.?\d{0,2}/)" /> </div> </template> <script lang="ts"> import { ref } from 'vue'; export default { setup() { const price = ref(''); return { price, }; }, }; </script> ``` 此方法能够有效地阻止非数字字符以及超过两个小数的情况被录入到表单字段中[^1]。 另外一种方式是在失去焦点(`@blur`)的候对数据做进一步的验证与修正: ```html <template> <div> <!-- 输入框 --> <el-input type="text" placeholder="请输入价格" v-model="rangePrice_3" oninput="value = value.replace(/[^\.\d]/g, '')" @blur="()=>{rangePrice_3=keepTwoDecimalFull(rangePrice_3)}" > </el-input> </div> </template> <script lang="ts"> function keepTwoDecimalFull(num:string):string{ let f=num.indexOf('.') if(f<=-1){ num+= '.' } while (num.length<f+3){ num+='0'; } return parseFloat((parseFloat(num).toFixed(2))); } </script> ``` 这种方法可以在最终提交前确保数值精确到了所需的精度级别[^2]。 对于更复杂的场景下可能还需要考虑其他因素比如千分符号的支持等问题,则可以根据具体需求调整上述逻辑。
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

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

抵扣说明:

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

余额充值