美文网首页
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