jQuery如何限制输入框仅支持数字、单个小数点且最多两位小数

最终可运行代码 #

JS 逻辑 #

$('input').on('input', function() {
    const $input = $(this);
    let val = $input.val();
    // 过滤所有非数字、非小数点的非法字符
    val = val.replace(/[^0-9.]/g, '');
    const firstDotPos = val.indexOf('.');
    if (firstDotPos !== -1) {
        // 限制小数点后最多两位
        val = val.slice(0, firstDotPos + 3);
        // 移除后续出现的所有多余小数点
        val = val.slice(0, firstDotPos + 1) + val.slice(firstDotPos + 1).replace(/\./g, '');
    }
    $input.val(val);
});

完整HTML示例 #

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<input type="text" />

实现逻辑说明 #

• 优先过滤所有非数字、非小数点的字符，从源头拦截非法输入
• 定位第一个小数点的位置，直接截断小数点后超出两位的内容，满足最多两位小数的要求
• 移除第一个小数点之后出现的所有多余小数点，保证全局只有一个小数点
• 用input事件替代原有的keyup事件，输入实时生效，不会出现按键按住不松时延迟校验的问题

内容的提问来源于stack exchange，提问作者user13286