uni-app inpu输入number限制两位小数失效（更改不了e.detail.value的值）

uni-app inpu输入number限制两位小数失效（更改不了e.detail.value的值）

开发环境 版本号 项目创建方式
Windows window10 HBuilderX

产品分类：uniapp/App

PC开发环境操作系统：Windows

PC开发环境操作系统版本号：window10

HBuilderX类型：正式

HBuilderX版本号：4.57

手机系统：Android

手机系统版本号：Android 15

手机厂商：华为

手机机型：暂未看手机

页面类型：vue

vue版本：vue3

打包方式：离线

项目创建方式：HBuilderX

示例代码：

<input  

    class="price-amount"  
    v-model="inputMoney"  
    type="number"  
    placeholder="请输入金额"  
    @input="handleMoneyInput"  
    @blur="handleMoneyBlur"  
/>

const handleMoneyInput = (e) => {  
    // 输入的值  
    let value = e.detail.value;  
    console.log("正在输入:", value);  

    // 实时截断多余小数位  
    if (value.includes(".")) {  
        let parts = value.split(".");  
        if (parts[1].length > 2) {  
            console.log('两位小数', value);  
            // 截断到两位小数  
            inputMoney.value = parts[0] + "." + parts[1].substring(0, 2);  
            console.log('inputMoney', inputMoney);  
            e.detail.value = inputMoney.value // 正常这里e.detail.value的值应该改变了，但页面显示还是可以输入其他的值  
        }  
    }  
};

更多关于uni-app inpu输入number限制两位小数失效（更改不了e.detail.value的值）的实战教程也可以访问 https://www.itying.com/category-93-b0.html

1 回复

更多关于uni-app inpu输入number限制两位小数失效（更改不了e.detail.value的值）的实战教程也可以访问 https://www.itying.com/category-93-b0.html


在uni-app中，直接修改e.detail.value是无效的，因为这是只读属性。正确的做法是通过v-model绑定的变量来控制输入值。以下是修改建议：

<input
    class="price-amount"
    v-model="inputMoney"
    type="number"
    placeholder="请输入金额"
    @input="handleMoneyInput"
    @blur="handleMoneyBlur"
/>

const handleMoneyInput = (e) => {
    let value = e.detail.value;
    if (value.includes(".")) {
        let parts = value.split(".");
        if (parts[1].length > 2) {
            // 直接修改绑定的变量
            inputMoney.value = parts[0] + "." + parts[1].substring(0, 2);
        }
    }
};
回到顶部