Angular自定义entersubmit指令选择下拉框后按Enter键失效如何解决

问题原因 #

你当前的entersubmit指令绑定在输入框元素上，@HostListener只会监听绑定元素自身触发的键盘事件。当你选择下拉框选项后，页面焦点会从输入框转移到下拉框元素上，此时按下Enter键的keyup事件是由下拉框元素触发，不会被输入框上的监听函数捕获，因此逻辑无法执行。

解决方案 #

这里提供两种常用修复方案：

方案1：将指令绑定到公共父容器（推荐） #

将entersubmit指令绑定到包含输入框和下拉框的公共父元素（比如表单<form>标签）上，利用事件冒泡特性，只要在父容器范围内触发的Enter键事件都会被捕获：

@Directive({ selector: '[entersubmit]' })
export class EnterEventDirective {
  constructor(private el: ElementRef) {}

  @HostListener('keyup.enter', ['$event'])
  onFormKeyUp(event: KeyboardEvent) { 
    // 可选：阻止默认表单提交行为
    event.preventDefault();
    alert('submitted');
  }
}

使用时把指令加在表单上即可：

<form entersubmit>
  <input type="text" />
  <select>
    <option value="1">选项1</option>
    <option value="2">选项2</option>
  </select>
</form>

方案2：给下拉框也添加指令绑定 #

如果不需要全局监听，直接给下拉框元素也加上entersubmit属性即可，让下拉框触发的Enter事件也能被监听：

<input type="text" entersubmit />
<select entersubmit>
  <option value="1">选项1</option>
  <option value="2">选项2</option>
</select>

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