完美的数字输入框，只能输入两位小数点以千分位分隔，解决iview inputnumber输入光标跳转问题

最新推荐文章于 2024-09-05 09:19:52 发布

Sophia George

最新推荐文章于 2024-09-05 09:19:52 发布

阅读量1.5k

点赞数

分类专栏： javascript VUE 文章标签：前端 javascript 前端框架

本文链接：https://blog.csdn.net/weixin_42977442/article/details/121976533

版权

javascript 同时被 2 个专栏收录

12 篇文章 2 订阅

订阅专栏

VUE

12 篇文章 0 订阅

订阅专栏

注意UI框架用的是iview

<InputNumber :formatter="value => `${value}`.replace(/\B(?=(\d{3})+(?!\d))/g, ',')" :parser="value => value.replace(/\$\s?|(,*)/g, '')" :active-change="false" :max="99999999.99" :min="1" :precision="2" v-model.number="vehicleForm.money"  style="width:100%"></InputNumber>

突然发现一个问题加了active-change=false后输入框就可以输入汉字，又经过试验重新添加了一个事件keyup，过滤掉不是数字的字符。

<InputNumber placeholder="最小金额" @keyup.native="NumberChange" :formatter="value => `${value}`.replace(/\B(?=(\d{3})+(?!\d))/g, ',')" :parser="value => value.replace(/\$\s?|(,*)/g, '')" :active-change="false"  :max="99999999.99" :min="1" :precision="2" v-model.number="searchForm.minMoney"  style="width:100%"></InputNumber>

NumberChange(e) {
//因为这个有千分位分隔符要去掉
      let filterValue = e.target.value.replace(/,/g,'')
      let value = Number(filterValue)
      if(e.target.value) {
         if(isNaN(value) || typeof value !== 'number') {
           e.target.value = null
         }
      }
    },

把e.target.value重新赋值就不能输入汉字了，应该对任意组件都适用