Angular 5中如何在用户按下ESC键时移除文本框焦点

没问题！你已经成功实现了ESC键的检测逻辑，接下来只需要在触发ESC事件时，让输入框失去焦点就可以了。这里提供两种实用的方案，你可以根据场景选择：

方案1：针对单个指定输入框 #

如果你的页面只有一个需要处理的输入框，可以通过模板引用变量结合ViewChild来精准控制：

1. 先在模板里给输入框添加一个模板引用：

<input type="text" #targetInput>

2. 在组件类中获取这个输入框的引用，并修改你的按键监听逻辑：

import { Component, HostListener, ViewChild, ElementRef } from '@angular/core';

@Component({
  selector: 'app-your-component',
  templateUrl: './your-component.component.html'
})
export class YourComponent {
  // 获取模板中的输入框元素
  @ViewChild('targetInput') targetInput: ElementRef;

  @HostListener('document:keydown', ['$event'])
  onKeydownHandler(event: KeyboardEvent) {
    // 推荐用event.key判断，keyCode已被废弃
    if (event.key === 'Escape') {
      // 调用blur()让输入框失去焦点
      this.targetInput.nativeElement.blur();
      // 阻止ESC的默认行为（比如关闭模态框等，按需选择）
      event.preventDefault();
    }
  }
}

方案2：针对页面上所有输入框 #

如果页面有多个输入框，想让当前正聚焦的输入框在按下ESC时失去焦点，可以用document.activeElement来动态获取焦点元素：

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

@Component({
  selector: 'app-your-component',
  templateUrl: './your-component.component.html'
})
export class YourComponent {
  @HostListener('document:keydown', ['$event'])
  onKeydownHandler(event: KeyboardEvent) {
    if (event.key === 'Escape') {
      const activeElement = document.activeElement;
      // 判断当前焦点元素是不是输入类控件（input/textarea等）
      if (activeElement instanceof HTMLInputElement || activeElement instanceof HTMLTextAreaElement) {
        (activeElement as HTMLElement).blur();
      }
      event.preventDefault();
    }
  }
}

小提示： #

keyCode已经被官方标记为废弃属性，推荐使用event.key === 'Escape'来判断ESC键，语义化更强，兼容性也更好。

内容的提问来源于stack exchange，提问作者Vijay Kumar Yadav