前端vue elementui中el-input只能输入数字

方法一

<el-input oninput="value=value.replace(/[^\d.]/g,'')" />

已上如果输入中文的话,虽然输不进去,但是输入文本后再输入数字,文本框中的数字不能进行计算,必须刷新页面后才行。

想要计算的话,可以用以下方法

方法二

<el-input type="number" />

这样文本框后面会有上下箭头,可以进行加1减1,如果精确到小数的话,这样就不方便,因为加1减1的时候会去掉小数
在这里插入图片描述

那么,可以去掉上下箭头的样式

<style scoped>
::v-deep input::-webkit-outer-spin-button,
::v-deep input::-webkit-inner-spin-button {
  -webkit-appearance: none !important;
}
::v-deep input[type='number'] {
  -moz-appearance: textfield !important;
  }
</style>

这样箭头就没了,而且只能输入数字,也可以精确到小数,计算时输入中文也不会出问题,只不过代码多一点点

评论 2
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

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

抵扣说明:

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

余额充值