点击手机号输入框任意位置输入直接覆盖原有值的实现方案咨询

你要的点击输入框任意位置输入直接覆盖原有内容的效果，本质是让输入框获得焦点时自动全选已有文本，新输入的内容会直接替换选中的全部内容，具体实现步骤如下：

第一步：给电话号码输入框绑定焦点事件 #

在你对应的HTML输入标签上添加focus事件监听，以你当前使用的带观察者模式的框架为例，写法参考：

<input type="tel" value="{{_contract.workPhone}}" on-focus="handlePhoneFocus">

第二步：新增焦点事件处理函数 #

// 电话号码输入框聚焦事件处理
handlePhoneFocus(e) {
    // 选中输入框内全部已有内容
    e.target.select();
    // 部分移动端浏览器需要额外加注释中的setTimeout逻辑兼容，避免选不上
    // setTimeout(() => { e.target.select() }, 10)
}

第三步：优化现有格式化逻辑，避免循环触发 #

你当前的代码存在双向绑定循环触发的风险：监听_contract.workPhone变化触发格式化，格式化后又重新给_contract.workPhone赋值，会再次触发观察者，调整后的代码如下：

// 观察者配置
static get observers() { 
    return [
        '_workNumber(_contract.workPhone)',
    ]
}

_workNumber(str) {
    // 先移除所有非数字字符
    let cleaned = ('' + str).replace(/\D/g, '');
    // 匹配11位手机号的3-3-4分段规则
    let match = cleaned.match(/^(\d{3})(\d{3})(\d{4})$/);
    if (match) {
        const formatted = `(${match[1]}) ${match[2]}-${match[3]}`
        // 只有当前值和格式化后的值不一致时才回写，避免循环触发观察者
        if (this._contract.workPhone !== formatted) {
            this._contract.workPhone = formatted;
        }
        return formatted
    }
    return null
};

额外注意事项 #

如果需要区分用户主动输入和代码赋值场景，避免代码给号码赋值的时候也触发全选，可以在handlePhoneFocus里加判断，只有用户主动点击触发的焦点才执行全选逻辑。

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