Angular输入框聚焦后仍有悬停效果，如何移除该效果？

问题的核心是焦点状态的优先级未被正确设置——当前的逻辑没有让聚焦状态覆盖悬停状态，导致即使输入框已聚焦，鼠标悬停仍会触发占位符切换。

你可以通过调整状态判断的优先级来解决这个问题：

• 维护两个状态变量：isHovered（记录是否悬停）和isFocused（记录是否聚焦）
• 计算占位符文本时，优先判断聚焦状态：如果已聚焦，直接显示TEXT3；未聚焦时，再根据悬停状态切换文本

组件代码修改（app.component.ts） #

import { Component } from '@angular/core';

@Component({
  selector: 'my-app',
  templateUrl: './app.component.html',
  styleUrls: ['./app.component.css'],
})
export class AppComponent {
  isHovered = false;
  isFocused = false;

  get placeholderText(): string {
    // 焦点优先级最高
    if (this.isFocused) {
      return 'TEXT3';
    }
    // 未聚焦时再判断悬停状态
    return this.isHovered ? 'TEXT2和"TEXT1"' : 'TEXT1';
  }
}

模板代码修改（app.component.html） #

<input
  [placeholder]="placeholderText"
  (mouseenter)="isHovered = true"
  (mouseleave)="isHovered = false"
  (focus)="isFocused = true"
  (blur)="isFocused = false"
/>

逻辑说明 #

1. 当输入框获得焦点时，isFocused设为true，此时无论鼠标是否悬停，占位符都会固定显示TEXT3
2. 输入框失去焦点后，isFocused设为false，这时悬停状态才会再次影响占位符文本
3. 通过getter函数placeholderText统一处理文本逻辑，让代码更清晰易维护

这样就能确保聚焦状态完全覆盖悬停效果，符合你的需求。

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