Angular中点击按钮复制禁用文本框内容（纯TypeScript实现，不使用Clipboard API）

禁用状态的<input>或<textarea>无法被直接选中，导致常规复制操作失效。这里提供纯TypeScript实现方案，通过临时创建隐藏可编辑元素完成复制：

核心复制函数 #

在你的Angular组件类中添加以下函数：

copyDisabledInputContent(inputElement: HTMLInputElement | HTMLTextAreaElement): boolean {
  // 校验目标元素状态
  if (!inputElement || !inputElement.disabled) {
    console.warn('目标元素不存在或未处于禁用状态');
    return false;
  }

  const content = inputElement.value;
  if (!content) {
    console.warn('无内容可复制');
    return false;
  }

  // 创建临时textarea用于承载内容
  const tempTextarea = document.createElement('textarea');
  // 设置样式隐藏元素，避免干扰页面
  tempTextarea.style.position = 'absolute';
  tempTextarea.style.left = '-9999px';
  tempTextarea.style.top = '-9999px';
  tempTextarea.style.opacity = '0';
  // 赋值待复制内容
  tempTextarea.value = content;

  // 将临时元素加入DOM
  document.body.appendChild(tempTextarea);

  // 选中内容并执行复制
  tempTextarea.select();
  const copySuccess = document.execCommand('copy');

  // 清理临时元素
  document.body.removeChild(tempTextarea);

  copySuccess ? console.log('复制成功') : console.error('复制失败');
  return copySuccess;
}

在Angular模板中使用 #

模板示例：

<input type="text" #disabledInput disabled value="这是禁用文本框的测试内容">
<button (click)="copyDisabledInputContent(disabledInput)">复制内容</button>

逻辑说明 #

1. 参数校验：确认目标元素存在、处于禁用状态且有可复制内容
2. 临时元素处理：生成隐藏的textarea，避免影响页面布局
3. 复制执行：转移内容到临时元素后，通过document.execCommand('copy')完成复制
4. DOM清理：复制完成后立即移除临时元素，避免冗余节点

注：document.execCommand虽被标记为废弃，但目前主流浏览器仍保持支持，适合不依赖Clipboard API的场景。

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