最多输入两位小数,适配移动端

本文介绍了一个使用jQuery实现的功能,该功能能够限制用户在输入框中输入的小数位数,确保输入的有效性和规范性。
$("input").bind('input propertychange', function() {
    var value = $(this).val();
    if(value.length > 0) {
        var temp = value.split(".");
        if(temp.length >= 2) {
            var l1 = temp[0].length + 1;
            var l2 = 0;
            if(temp[1].length > 2) {
                l2 = 2;
            } else {
                l2 = temp[1].length;
            }
            value = value.substr(0, l1 + l2);
        }
    }
    $(this).val(value);
});

 

import { ref } from 'vue'; export default { setup() { // 实际数值(数字类型) const actualValue = ref(0); // 显示值(字符串) const displayValue = ref('0.00'); // 处理输入事件 const handleInput = (value) => { // 先移除所有非数字和小数点的字符,但注意:不能输入多个小数点 let newValue = value.replace(/[^\d.]/g, ''); // 只保留第一个小数点,去掉后面的 const dotIndex = newValue.indexOf('.'); if (dotIndex !== -1) { // 如果已经有小数点,则后面的小数点都去掉 const beforeDot = newValue.substring(0, dotIndex + 1); const afterDot = newValue.substring(dotIndex + 1).replace(/\./g, ''); newValue = beforeDot + afterDot; } // 限制小数点后最多两位 if (dotIndex !== -1) { const parts = newValue.split('.'); if (parts[1] && parts[1].length > 2) { newValue = parts[0] + '.' + parts[1].substring(0, 2); } } // 更新显示值(此时不带千分符) displayValue.value = newValue; // 更新实际值(转换为数字,如果为空则设为0) actualValue.value = newValue === '' ? 0 : parseFloat(newValue); }; // 处理失去焦点事件:格式化显示 const handleBlur = () => { // 确保actualValue是数字,然后格式化为两位小数 // 注意:如果输入的是整数,我们也要显示两位小数吗?根据需求:涉及金额保留两位小数 // 所以,即使输入整数,也要显示为两位小数 const num = actualValue.value; // 如果输入非法,则用0代替 if (isNaN(num)) { actualValue.value = 0; displayValue.value = formatNumber(0); } else { // 确保两位小数(四舍五入) actualValue.value = Math.round(num * 100) / 100; displayValue.value = formatNumber(actualValue.value); } }; // 处理获取焦点事件:去掉千分符,变成纯数字字符串(但保留两位小数,因为输入时可能需要修改) const handleFocus = () => { // 将显示值变为不带千分符的数字字符串 // 注意:因为失去焦点时已经格式化为两位小数,所以这里直接用actualValue的数值转字符串可能不够两位小数,所以我们要转换为两位小数的字符串 const num = actualValue.value; displayValue.value = num.toString().replace(/\B(?=(\d{3})+(?!\d))/g, ','); // 但是,我们要去掉千分符,并且显示两位小数吗? // 实际上,在输入时我们希望用户看到的是数字字符串(不带逗号),所以我们要去掉逗号 // 同时,要保证小数部分有两位(如果不足则补0) // 但我们也可以直接显示去掉逗号的字符串,小数部分按实际显示(输入时用户自己输入小数) // 这里我们去掉逗号,并且保留原有小数位数(最多两位,因为输入时已经控制了) // 注意:用户可能输入整数,所以这里要补两位小数吗?不,在输入过程中用户自己输入,我们不需要补。但是在失去焦点时我们会补。 // 所以,获取焦点时,我们去掉逗号,但不补小数位(因为用户可能想修改整数部分) // 因此,我们直接用去掉逗号的字符串,但注意,这个字符串是之前输入时保留的,小数部分可能不足两位,但没关系。 displayValue.value = displayValue.value.replace(/,/g, ''); }; // 格式化数字为千分符并保留两位小数 const formatNumber = (num) => { // 使用toLocaleString方法 return num.toLocaleString(undefined, { minimumFractionDigits: 2, maximumFractionDigits: 2 }); }; return { displayValue, actualValue, handleInput, handleBlur, handleFocus }; } };
11-12
评论 1
成就一亿技术人!
拼手气红包6.0元
还能输入1000个字符
 
红包 添加红包
表情包 插入表情
 条评论被折叠 查看
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

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

抵扣说明:

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

余额充值