输入框自动格式化需求：实现CPF格式（xxx.xxx.xxx-xx）输入掩码

Hey，我帮你把这个CPF输入格式化的功能搞定！你的现有代码逻辑有点小问题，我调整后就能完美实现xxx.xxx.xxx-xx的实时格式化效果了👇

完整JavaScript代码 #

function maskCPF(v) {
    // 先移除所有非数字字符，只保留纯数字
    v = v.replace(/\D/g, "");
    // 分步骤匹配并添加CPF格式分隔符
    v = v.replace(/(\d{3})(\d)/, "$1.$2");
    v = v.replace(/(\d{3})(\d)/, "$1.$2");
    v = v.replace(/(\d{3})(\d{2})$/, "$1-$2");
    return v;
}

function maskDexxtz(o, f) {
    const v_obj = o;
    const v_fun = f;
    // 用requestAnimationFrame替代setTimeout，让格式化更流畅无延迟
    requestAnimationFrame(() => mask(v_obj, v_fun));
}

function mask(input, formatFunction) {
    // 将输入框的值替换为格式化后的结果
    input.value = formatFunction(input.value);
}

对应的HTML输入标签（补充关键事件） #

<input 
    type="text" 
    onkeypress="maskDexxtz(this, maskCPF)"
    onkeyup="maskDexxtz(this, maskCPF)" <!-- 新增keyup事件，处理退格/删除时的重新格式化 -->
    maxlength='14' 
    title="<?php echo $this->__('Tax/VAT number') ?>"
/>

代码逻辑说明 #

• maskCPF函数：
  • 第一步过滤所有非数字字符，确保只处理有效输入；
  • 三次正则替换分别完成..和-的插入：先给前3位数字加.，再给中间3位加.，最后给末尾2位加-，完美贴合CPF格式。
• maskDexxtz函数：
  • 改用requestAnimationFrame替代原setTimeout，让格式化操作和浏览器渲染同步，避免输入时的延迟感；
  • 把输入框对象和格式化函数传递给执行函数mask。
• mask函数：
  • 接收输入框和格式化规则，直接将格式化后的值赋值给输入框，完成实时更新。
• HTML事件补充：
  • 新增onkeyup事件，解决用户退格、删除字符时格式混乱的问题，确保任何输入操作后都能重新触发格式化。

这样用户在输入数字时，就会自动实时格式化为xxx.xxx.xxx-xx的CPF格式啦！

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