Angular中如何检测禁用状态下输入框的click/hover/blur等事件？

浏览器默认不会触发禁用（disabled）状态下<input>的click、hover、blur等事件，因为禁用元素的指针事件会被浏览器忽略。以下是两种可行的实现方案：

方案一：用容器包裹输入框，绑定事件到容器 #

通过在禁用的input外层套一个容器，将事件绑定到容器上，同时让input的指针事件穿透到容器，以此捕获交互事件。

模板代码 #

<div class="input-container" 
     (click)="onInputClick()" 
     (mouseenter)="onInputHover()"
     (mouseleave)="onInputLeave()">
  <input [disabled]="disableTextbox" type="text" />
</div>

样式代码 #

.input-container {
  display: inline-block;
  position: relative;
}

.input-container input[disabled] {
  pointer-events: none; /* 让点击/hover事件穿透到外层容器 */
}

组件逻辑 #

disableTextbox = true;

onInputClick() {
  if (this.disableTextbox) {
    console.log('禁用状态下触发了点击事件');
    this.delectInput();
  }
}

onInputHover() {
  if (this.disableTextbox) {
    console.log('禁用状态下触发了hover事件');
  }
}

onInputLeave() {
  if (this.disableTextbox) {
    console.log('禁用状态下触发了leave事件');
  }
}

delectInput() {
  // 你的原有业务逻辑
}

方案二：改用readonly属性，模拟禁用样式 #

如果业务允许，可以不使用disabled，而是用readonly属性（输入框不可编辑但保留交互能力），再通过自定义CSS模拟禁用的视觉效果，这样就能直接在input上绑定事件。

模板代码 #

<input 
  [readonly]="disableTextbox"
  [class.input-disabled]="disableTextbox"
  type="text"
  (click)="delectInput()"
  (mouseenter)="onInputHover()"
  (blur)="onInputBlur()"
/>

样式代码 #

.input-disabled {
  background-color: #e9ecef;
  cursor: not-allowed;
  border-color: #ced4da;
  color: #6c757d;
}

组件逻辑 #

disableTextbox = true;

delectInput() {
  if (this.disableTextbox) {
    console.log('禁用状态下触发点击');
  }
}

onInputHover() {
  if (this.disableTextbox) {
    console.log('禁用状态下触发hover');
  }
}

onInputBlur() {
  if (this.disableTextbox) {
    console.log('禁用状态下触发blur');
  }
}

方案对比 #

• 方案一：保留原生disabled的语义，适合需要严格遵循表单禁用规则的场景，但需要额外的容器和样式调整。
• 方案二：事件绑定更直接，不需要额外容器，但语义上是“只读”而非“禁用”，需要自己维护禁用样式，适合对表单语义要求不高的场景。

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