Angular中双击只读输入框无法立即获焦选中文本，点击按钮正常如何解决？

这个问题的核心原因是当双击输入框时，readField从true切换到false后，Angular的变更检测还没来得及更新DOM的readonly属性，此时直接调用focus()会因为输入框仍处于只读状态而失败。另外，浏览器的双击默认文本选择行为也会干扰我们的自定义逻辑。下面是具体的解决步骤：

1. 确保DOM更新后再执行聚焦 #

我们需要让Angular先把readonly属性从DOM上移除，再执行聚焦操作。有两种常用方式：

方式一：使用ChangeDetectorRef手动触发变更检测 #

首先在组件中注入ChangeDetectorRef：

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

constructor(private cdr: ChangeDetectorRef) {}

然后修改setInputValuesAndSetFocus方法：

private setInputValuesAndSetFocus = (e: any): void => {
  this.showButtons = true;
  this.readField = false;
  this.onFocused = true;

  // 手动触发变更检测，让DOM先更新为可编辑状态
  this.cdr.detectChanges();

  // 聚焦输入框
  e.focus();
};

方式二：使用setTimeout延迟执行聚焦 #

如果不想依赖ChangeDetectorRef，可以用setTimeout把聚焦逻辑放到下一个事件循环，此时Angular已经完成DOM更新：

private setInputValuesAndSetFocus = (e: any): void => {
  this.showButtons = true;
  this.readField = false;
  this.onFocused = true;

  // 延迟执行，确保DOM已更新
  setTimeout(() => {
    e.focus();
  }, 0);
};

2. 实现双击全选内容 #

要在双击时选中输入框全部内容，只需要在聚焦后调用select()方法即可。同时建议阻止浏览器的双击默认行为，避免默认选择干扰我们的全选逻辑：

修改模板中的双击事件 #

<input 
  [attr.id]="fieldId" 
  type="text" 
  [readonly]="readField" 
  (blur)="onBlurEvent(elem)" 
  (dblclick)="onDoubleClick(elem, $event)" <!-- 新增$event参数 -->
  class="form-control" 
  [(ngModel)]="fieldValue" 
  #elem 
  [attr.name]="fieldId" 
  (ngModelChange)="onChange()"
>

更新组件中的双击处理函数 #

onDoubleClick = (e: any, event: MouseEvent): void => {
  // 阻止浏览器默认双击选择行为
  event.preventDefault();
  this.setInputValuesAndSetFocus(e);
};

在聚焦逻辑中添加全选 #

修改setInputValuesAndSetFocus，在focus()后调用select()：

private setInputValuesAndSetFocus = (e: any): void => {
  this.showButtons = true;
  this.readField = false;
  this.onFocused = true;

  this.cdr.detectChanges(); // 或用setTimeout方式

  e.focus();
  // 选中全部内容（仅当输入框有值时生效，空值时无效果）
  e.select();
};

3. 验证两种操作效果一致 #

经过以上修改后，无论是点击铅笔按钮还是双击输入框：

• 输入框都会立即从只读切换为可编辑状态
• 输入框会自动获焦
• 双击时输入框有值的话会自动选中全部内容

这样就完全实现了你想要的一致效果。

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