Angular 8中readonly输入框的(keyup.enter)事件无法触发

这个问题挺常见的——浏览器会对readonly状态的输入框忽略大部分键盘事件，包括keyup.enter，因为它默认认为只读元素不需要响应键盘交互。不过我们有几种可行的解决方案，你可以根据需求选择：

方案1：用CSS+事件阻止模拟只读效果（推荐） #

放弃原生readonly属性，通过CSS让输入框视觉上呈现只读状态，同时阻止用户输入，这样键盘事件就能正常触发了：

<input 
  type="text" 
  [(ngModel)]="display.name" 
  (click)="openProfile()" 
  (keyup.enter)="submitProfile()" 
  style="background-color: #f5f5f5; border: 1px solid #ddd; user-select: none;"
  (keydown)="$event.preventDefault()"
/>
<button (click)="submitProfile()" type="submit"> Submit </button>

• (keydown)="$event.preventDefault()"：直接阻止用户输入任何内容，达到只读的核心效果
• CSS样式：让输入框看起来和原生readonly状态完全一致
• 输入框依然可以被聚焦、响应键盘事件，keyup.enter就能正常触发submitProfile()

方案2：保留readonly，监听全局enter键 #

如果一定要用原生readonly，可以在组件中监听全局的enter键事件，判断当前聚焦的是目标输入框时触发提交：
首先给输入框加个唯一标识（比如id）：

<input 
  id="profileNameInput"
  type="text" 
  [(ngModel)]="display.name" 
  (click)="openProfile()" 
  readonly 
/>
<button (click)="submitProfile()" type="submit"> Submit </button>

然后在组件类中添加HostListener：

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

// ... 其他组件代码

@HostListener('document:keydown.enter', ['$event'])
handleEnterKeyPress(event: KeyboardEvent) {
  const targetElement = event.target as HTMLElement;
  // 检查当前触发事件的元素是目标readonly输入框
  if (targetElement.id === 'profileNameInput' && targetElement.hasAttribute('readonly')) {
    event.preventDefault();
    this.submitProfile();
  }
}

这样不管输入框是不是readonly，只要它被聚焦且用户按下enter，就会触发提交逻辑。

方案3：给readonly输入框添加tabindex #

部分浏览器下，给readonly输入框加上tabindex="0"让它能被正常聚焦，可能可以触发keydown.enter事件（注意这里用keydown而非keyup）：

<input 
  type="text" 
  [(ngModel)]="display.name" 
  (click)="openProfile()" 
  (keydown.enter)="submitProfile()" 
  readonly 
  tabindex="0"
/>
<button (click)="submitProfile()" type="submit"> Submit </button>

不过这个方法的兼容性不如前两种，建议优先试试方案1或2。

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