点击输入框后移除mouse over与mouse out事件效果问题求助

问题分析 #

当前代码在输入框聚焦后，鼠标再次悬停或移出时依然会修改placeholder文本，核心原因是没有判断输入框的聚焦状态，导致悬停事件不受聚焦状态限制。

解决方案 #

新增一个状态变量跟踪输入框是否处于聚焦状态，在悬停相关事件中加入状态判断，仅当输入框未聚焦时才修改placeholder。

修改后的代码示例 #

// 初始化聚焦状态变量
this.isFocused = false;

onMouseOver() {
    // 未聚焦时才更新placeholder
    if (!this.isFocused) {
        this.placeHolder = 'text1';
    }
}

onMouseOut() {
    // 未聚焦时才更新placeholder
    if (!this.isFocused) {
        this.placeHolder = 'text2';
    }
}

onMouseFocus() {
    this.isFocused = true;
    this.placeHolder = 'text3';
}

// 补充失去焦点事件，恢复悬停效果
onMouseBlur() {
    this.isFocused = false;
    // 失去焦点后重置为默认placeholder
    this.placeHolder = 'text2';
}

关键说明 #

• isFocused变量用于记录输入框的聚焦状态，作为悬停事件修改placeholder的判断条件
• 聚焦时禁用悬停事件的placeholder修改逻辑，确保聚焦状态下文本稳定
• 补充onMouseBlur事件处理，在输入框失去焦点后恢复悬停效果，并重置placeholder为默认值

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