handleInput(e) { // 通过正则过滤小数点后两位 e.target.value = (e.target.value.match(/^\d*(\.?\d{0,1})/g)[0]) || null},Vue 限制input输入数字 不可._vue number 小数">
当前位置:   article > 正文

Vue 限制input输入金额 小数点后两位number_vue number 小数

vue number 小数
  1. 限制input输入 小数点后两位number
  2. <input type="number" @keydown="handleInput" placeholder="请输入或查看" v-model="item.SalePrice">
  3. handleInput(e) {
  4. // 通过正则过滤小数点后两位
  5. e.target.value = (e.target.value.match(/^\d*(\.?\d{0,1})/g)[0]) || null
  6. },
  7. Vue 限制input输入数字 不可小数
  8. <input type="number" @keydown="handleInput" placeholder="请输入" v-model="SaleQty">
  9. handleInput(e) {
  10. // log(e.target.value)
  11. e.target.value=e.target.value.replace(/[^\d]/g,'');
  12. },

上述方法有个问题,那就是输入小数点后,删除会删掉小数点后两位,有哪位大神解决了可以在评论区告诉我,下述方法可以解决上述问题,然而有个小问题就是输入0后除了输入小数点,点其他数字无反应

  1. <input class="money-input"
  2. :class="inputMoney ? 'font-bold font-24' : 'font-18'"
  3. type="number"
  4. maxlength="1000000"
  5. placeholder="请输入加油金额"
  6. oninput="if(value.length>8)value=value.slice(0,8)"
  7. @input="handleInput"
  8. v-model="inputMoney" />
  9. handleInput(e) {
  10. const inputStr = e.target.value
  11. // 只能输入两位小数的数字
  12. const result = inputStr.match(/(0|[1-9]\d*)?(\.\d{0,2})?/)
  13. this.inputMoney = parseFloat(result);
  14. },

第三种方法

  1. <input
  2. type="number"
  3. v-model="amount"
  4. maxlength="12"
  5. @input="handleInput"
  6. placeholder="请输入您的提现额度"
  7. />
  8. // 检查输入
  9. handleInput() {
  10. let price = "" + this.amount;
  11. price = price
  12. .replace(/[^\d.]/g, "") // 清除“数字”和“.”以外的字符
  13. .replace(/\.{2,}/g, ".") // 只保留第一个. 清除多余的
  14. .replace(".", "$#$")
  15. .replace(/\./g, "")
  16. .replace("$#$", ".")
  17. .replace(/^(\-)*(\d+)\.(\d\d).*$/, "$1$2.$3"); // 只能输入两个小数
  18. if (price.length > 8) {
  19. //限制最多输入八位字符
  20. price = price.slice(0, 8);
  21. }
  22. if (price.indexOf(".") < 0 && price != "") {
  23. // 以上已经过滤,此处控制的是如果没有小数点,首位不能为类似于 0102的金额
  24. price = parseFloat(price);
  25. }
  26. this.amount = price;
  27. },

声明:本文内容由网友自发贡献,不代表【wpsshop博客】立场,版权归原作者所有,本站不承担相应法律责任。如您发现有侵权的内容,请联系我们。转载请注明出处:https://www.wpsshop.cn/w/繁依Fanyi0/article/detail/549563
推荐阅读
相关标签
  

闽ICP备14008679号