js限制input框只能输入小数点后三位的数字

写一个通用方法,限制几位都可以

<input type="text" id="numberInput" oninput="limitDecimalPlaces(this, 3)"> 
function limitDecimalPlaces(input, decimalPlaces) {  
    // 正则表达式,允许整数部分和小数点后最多decimalPlaces位数字  
    // 这里的正则表达式假设输入总是有效的(即,用户不会直接输入非数字字符),  
    // 但为了健壮性,我们还是加入了对非数字字符的清理。  
    const regex = new RegExp(`^\\d*(\\.\\d{0,${decimalPlaces}})?$`);  
      
    // 获取当前值,并移除任何非数字字符(除了点和数字)  
    let value = input.value.replace(/[^\d.]/g, '');  
      
    // 如果值以点开头,在前面添加一个0(可选,取决于你的需求)  
    if (value.startsWith('.')) {  
        value = '0' + value;  
    }  
      
    // 使用正则表达式检查值  
    if (!regex.test(value)) {  
        // 如果值不符合规则,则截断到小数点后decimalPlaces位  
        let parts = value.split('.');  
        if (parts[1]) {  
            parts[1] = parts[1].substring(0, decimalPlaces);  
        }  
        value = parts.join('.');  
    }  
      
    // 更新输入框的值  
    input.value = value;  
}  

// 注意:这个实现假设用户输入是逐步进行的,并且不会直接粘贴不符合规则的字符串。  
// 如果需要处理粘贴事件,你可能还需要监听`paste`事件并相应地处理它。

  • 9
    点赞
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值