js input小数输入框完美体验

---

没注意iview有input Number封装，早知道不写这玩意了。不过这个体验更好
参考：input框输入金额完美交互 作者写的很棒

---

效果图

//上边链接里边的话，复制过来的
输入前显示“0.00”
移入后如果是“0.00”则清空内容
移入后如果是“*.00”则去除后面的“.00”以方便填写
移入后如果是“*.*0”则优化成“*.*”，即去掉最后面的“0”以方便填写
什么都没写移出后又再次填充“0.00”
只能输入数字和小数点
仅能输入一个小数点
仅保留后面两个小数点

vue代码

• html

<FormItem label="价格区间:" required>
  <Col span="5">
    <Input :disabled='gp.loading' v-model.trim='price1' :maxlength="20" @on-focus="priceFocus(1)" @on-keyup="priceKeyup(1)" @on-blur="priceBlur(1)"/>
  </Col>
  <Col span="1" style="text-align:center">~</Col>
  <Col span="5">
    <Input :disabled='gp.loading' v-model.trim='price2' :maxlength="20" @on-focus="priceFocus(2)" @on-keyup="priceKeyup(2)" @on-blur="priceBlur(2)"/>
  </Col>
</FormItem>

• js

data() {
    return {
        price1:"0.00",
        price2:"0.00",
        tempPrice1:"",
        tempPrice2:""
    }
},
methods: {
    //price input function--- start
    priceFocus(n) {
        if (this[`price${n}`] == '0.00') {
            this[`price${n}`] = '';
        } else {
            /*  去掉最后的0  --  .00换为""，.*0换为.*   */
            this[`price${n}`] = this[`price${n}`].replace(/\.00/, '').replace(/(\.\d)0/, '$1');
        }
        this[`tempPrice${n}`] = this[`price${n}`];
    },
    priceKeyup(n) {
        /*仅能输入数字和小数点，此外的替换为""*/
        this[`price${n}`] = this[`price${n}`].replace(/^[\.]/, '').replace(/[^\d.]/g, '');
        // 仅能输入一个小数点，超过一个小数点则无效，赋回原来的值
        if (this[`price${n}`].split(".").length > 2) {
            this[`price${n}`] = this[`tempPrice${n}`];
        }
        this[`tempPrice${n}`] = this[`price${n}`];
    },
    priceBlur(n) {
        this[`price${n}`] = this[`price${n}`].replace(/[\.]$/, '');// .结尾的换为""
        // 只要小数点后的两位。$1为 (.*) 匹配的内容 $2为([\d]{2})匹配的内容
        this[`price${n}`] = this[`price${n}`].replace(/(.*)\.([\d]{2})(\d*)/g, '$1.$2');
        // 补全小数
        this[`price${n}`] = Number(this[`price${n}`]).toFixed(2);
    },
    //price input function--- end
}

---

😁欢迎加入QQ群交流： [游戏-Web-开发技术栈 ☄️] '300567032’
点击下方图标一键加入！

---