vue输入框input只能输入两位小数

视图

  <div>
    <input  type="digit" v-model="inputValue" @input="handleInput" />
  </div>

js

// 处理输入的内容,只允许输入两位小数
            handleInput(event) {
                if (event.detail.value) {
                    this.isShowClear = true
                }
                let val = event.detail.value;
                   val = val.replace("-", "");//屏蔽负数
                // 如果输入内容不是数字和小数点,则直接返回上次输入的值。在input里已经处理过:type="digit"
//=========================================
                if (!/^\d+(\.\d*)?$/.test(val)) {
                    event.detail.value = this.inputValue;
                    return;
                }
                // console.log('处理输入的内容', val);
                // 将输入的内容转为浮点型
                val = parseFloat(val);//关键代码,其他可注释
                // 如果转换失败,则直接返回上次输入的值
                if (isNaN(val)) {
                    event.detail.value = this.inputValue;
                    return;
                }
//=====================================
                // 只保留两位小数
                
                if(AMapUtils.isMoreThanTwo(val))
                {
                    val = val.toFixed(2);
                }
                // console.log('只保留两位小数', val);
                // 更新数据
                this.$nextTick(() => {
                    this.inputValue = val;
                    event.detail.value = val;
                });
                this.$forceUpdate();
                //保证只能输入两个小数
            },

判断小数是否超过两位

function isMoreThanTwo(num) {  
    // 使用正则表达式判断是否是小数  
    if(/\./.test(num)) {  
        // 使用split('.')将数字分割成整数部分和小数部分  
        var parts = num.toString().split('.');  
        // 获取小数部分的长度  
        var decimalPlaces = parts[1].length;  
        // 如果小数部分的长度大于2,则返回true,否则返回false  
        return decimalPlaces > 2;  
    } else {  
        return false;  
    }  
}
最后编辑于
©著作权归作者所有,转载或内容合作请联系作者
平台声明:文章内容(如有图片或视频亦包括在内)由作者上传并发布,文章内容仅代表作者本人观点,简书系信息发布平台,仅提供信息存储服务。

推荐阅读更多精彩内容