前端输入框要求输入数字及两位小数

原创已于 2022-10-11 19:46:19 修改 · 736 阅读

2 ·

CC 4.0 BY-SA版权

文章标签：

#前端 #vue.js

于 2022-09-16 16:49:49 首次发布

本文介绍如何使用Vue.js开发中实现金钱输入框，确保只接受两位小数的数字输入，同时处理Firefox兼容性问题，通过正则表达式和类型转换来保证输入格式的正确性。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

开发中要求金钱输入框输入数字及两位小数

<input
  v-model="price"
  @input="handleInputPrice($event)"
  placeholder="0.00"
  type="text"
/>

methods方法中

handleInputPrice(e) {
  let num = "" + e.target.value;
      num = num
		     .replace(/[^\d.]/g, "") // 清除“数字”和“.”以外的字符
		
		     .replace(/\.{2,}/g, ".") // 只保留第一个. 清除多余的
		
		     .replace(/^\./g, "") // 保证第一个为数字而不是.
		
		     .replace(".", "$#$")
		
		     .replace(/\./g, "")
		
		     .replace("$#$", ".");
      if (num.indexOf(".") < 0 && num !== "") {
        num = parseFloat(num) + "";
      } else if (num.indexOf(".") >= 0) {
        num = num.replace(/^()*(\d+)\.(\d\d).*$/, "$1$2.$3"); // 只能输入两个小数
      }
      e.target.value = num;
},