关于Input type为number的长度,数字,保留几位小数的限制(自己意见、仅供参考)

写在这里单纯的目的就是,担心后期遗忘

就是平时项目中input的一些限制输入的

le-input-number 例如显示长度的时候、自己感觉虽然好用、但是实际项目中的时候会有问题、就是限制长度 是在输入完之后才会生效

但是实际项目中想要的是 、输入超过一定位数就不允许输入

<el-input  v-model=""
           type="number" 
           oninput="
if(isNaN(value)) {value = parseFloat(value)}
if(value < 0){value = 0}
if(value.indexOf('.') == -1 && value.length > 6) {value=value.slice(0,6)} 
if(value.indexOf('.') >= 6) {
            value=value.slice(0,6) +value.slice(value.indexOf('.'),value.indexOf('.')+7)}
if(value.indexOf('.') > -1 && value.indexOf('.') <= 6) {
            value=value.slice(0,value.indexOf('.')) + 
                  value.slice(value.indexOf('.'),value.indexOf('.')+7)} 
if(value.indexOf('0') == 0) {value=value.slice(1)}"

onKeypress="return (/[\d\.]/.test(String.fromCharCode(event.keyCode)))"
           placeholder="请输入">
 </el-input>
onKeypress是为了限制输入e的问题

el-input-number
第一就是:限制长度 输入完才生效,会在实际项目中不友好
el-input
显示各种的话 要加各种判断、但是e依然会输入
所有用了onKeypress的方法限制e
<el-input v-model=""
          type="number"
          oninput="
//isNaN判断是否为数值,返回true或者false
if(isNaN(value)) {value = parseFloat(value)} 

//小于0,返回0
if(value < 0){value = 0}

//不存在小数点,位数超过6,直接截取
if(value.indexOf('.') == -1 && value.length > 6){value=value.slice(0,6)} 
                   
//小数点 前面的 位数超过6,小数点前面截取6,小数点后面截取6
if(value.indexOf('.') >= 6) {
 value=value.slice(0,6)+value.slice(value.indexOf('.'),value.indexOf('.')+7)
}

//输入的数值第一位是0,直接从第二位截取                               
if(value.indexOf('0') == 0) {value=value.slice(1)}"

onKeypress="return (/[\d\.]/.test(String.fromCharCode(event.keyCode)))"
placeholder="请输入预存费用">
              
</el-input>

  • 1
    点赞
  • 3
    收藏
    觉得还不错? 一键收藏
  • 打赏
    打赏
  • 0
    评论
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包

打赏作者

老董前端

你的鼓励将是我创作的最大动力

¥1 ¥2 ¥4 ¥6 ¥10 ¥20
扫码支付:¥1
获取中
扫码支付

您的余额不足,请更换扫码支付或充值

打赏作者

实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

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

余额充值