onblur触发手机号格式化后如何将新值返回写入输入框

你的代码存在3个核心逻辑问题，逐一修正即可实现失焦自动格式化电话号码的效果：

• 错误1：字符串取值逻辑错误：ancien_tel.substring(6)本身已经返回截取后的字符串，不需要额外调用.value，该写法会导致最后一段号码拼接出undefined
• 错误2：没有将计算结果写回DOM：你只是修改了函数内的局部变量ancien_tel，该变量和输入框的实际value没有绑定关系，修改后不会同步到输入框
• 错误3：输入框长度限制冲突：格式化后的标准电话号码格式(xxx) xxx-xxxx总长度为13位，原有maxlength="10"的限制会导致格式化后的值被截断无法正常写入

修正后完整代码 #

<!DOCTYPE html>
<html>
<head>
    <title>Page Title</title>
    <meta charset="UTF-8">
    <script>
        function reformatter() {
            // 获取输入框DOM元素
            const telInput = document.querySelector("#telephone");
            // 取出原始输入值，先过滤所有非数字字符，避免用户输入特殊符号干扰格式化
            const ancien_tel = telInput.value.replace(/\D/g, '');
            // 输入不足10位时不做格式化，避免生成残缺格式
            if (ancien_tel.length !== 10) return;
            // 拼接格式化号码，移除多余的.value调用
            const nouveau_tel = `(${ancien_tel.substring(0, 3)}) ${ancien_tel.substring(3, 6)}-${ancien_tel.substring(6)}`;
            // 将格式化后的值写回输入框
            telInput.value = nouveau_tel;
        }   
    </script>
</head>
<body>
    Telephone:<br>
    <!-- 调整maxlength适配格式化后的号码长度 -->
    <input type="text" id="telephone" onblur="reformatter()" maxlength="14">
</body>
</html>

额外优化说明：新增的非数字字符过滤逻辑，可以兼容用户手动输入括号、横杠、空格的场景，不会出现格式重复拼接的错乱问题。

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