美文网首页
vue3 输入框支持输入两位小数 支持负数

vue3 输入框支持输入两位小数 支持负数

作者: 八妹sss | 来源:发表于2024-09-22 10:06 被阅读0次
    <template>
       <van-field v-model="number" type="number" @input="onInput" />
    </template>
    <script setup>
      const onInput = (event) => {
            var input = event.target;
            var value = input.value;
    
            value = value.replace(/[^\d.-]/g, ""); //清除"数字"和"."和-以外的字符
            value = value.replace(/^\./g, ""); //验证第一个字符是数字或者负号而不是.
            value = value.replace(/\.{2,}/g, "."); //只保留第一个.清除多余的
            let isF = false;
            if (value.substring(0, 1) === '-') {
              // 是负数,做个标记
              isF = true;
            }
            // 把所有负号先删除
            value = value.replace(/-/g, "");
            value = value
              .replace(".", "$#$")
              .replace(/\./g, "")
              .replace("$#$", ".");
    
            value = value.replace(/^(\\-)*(\d+)\.(\d\d).*$/, "$1$2.$3"); //只能输入两个小数
            if (isF) { // 删除后面其他负号
              value = '-' + value;
            }
    
            // 更新输入框的值
            input.value = value;
          }
    </script>
    

    参考地址:https://blog.csdn.net/m0_46156566/article/details/131410369

    相关文章

      网友评论

          本文标题:vue3 输入框支持输入两位小数 支持负数

          本文链接:https://www.haomeiwen.com/subject/fxbtrjtx.html