本文介绍一种简洁可靠的前端方案，通过单击任意地址行或整个地址区块，将完整地址（含换行）复制到用户剪贴板，并支持 title 悬停提示“click to copy”，兼容现代浏览器且无需额外依赖。

本文介绍一种简洁可靠的前端方案，通过单击任意地址行或整个地址区块，将完整地址（含换行）复制到用户剪贴板，并支持 `title` 悬停提示“click to copy”，兼容现代浏览器且无需额外依赖。

要实现点击复制多行地址并提供友好交互，关键在于语义正确性、DOM 可访问性与 Clipboard API 的规范使用。原方案中存在多个问题： 包裹多个

违反 HTML 规范（按钮内仅允许 phrasing 内容）；getElementsByClass 方法名错误（应为 getElementsByClassName，且返回 HTMLCollection，不能直接拼接）；text.select() 对非表单元素无效；innerText + "
" 拼接后无法直接调用 .select() 或 .value —— 这些都会导致脚本报错或复制失败。

✅ 推荐做法是使用语义中立的

作为容器，并利用 this 传入上下文，通过 innerText 获取纯文本内容（自动保留换行），再用 navigator.clipboard.writeText() 写入剪贴板：

<div onclick="copyText(this)" title="Click to copy full address" class="address-block">
  <p title="Click to copy">Address line 1</p>
  <p title="Click to copy">Address line 2</p>
  <p title="Click to copy">Address line 3</p>
  <p title="Click to copy">County</p>
  <p title="Click to copy">Post code</p>
</div>

对应 JavaScript（已修复逻辑并增强健壮性）：

function copyText(element) {
  // 提取所有子段落的纯文本，用换行符连接（innerText 自动处理换行）
  const lines = Array.from(element.querySelectorAll('p')).map(p => p.innerText);
  const fullAddress = lines.join('\n');

  // 复制到剪贴板（返回 Promise）
  navigator.clipboard.writeText(fullAddress)
    .then(() => {
      // 可选：临时提示成功（比 alert 更友好）
      showCopyFeedback('✓ Address copied!');
    })
    .catch(err => {
      console.error('Failed to copy address:', err);
      showCopyFeedback('✗ Copy failed');
    });
}

// 辅助函数：显示短暂视觉反馈（替代侵入式 alert）
function showCopyFeedback(message) {
  const feedback = document.createElement('div');
  feedback.textContent = message;
  feedback.style.cssText = `
    position: fixed; top: 20px; right: 20px;
    background: #333; color: white; padding: 8px 16px;
    border-radius: 4px; z-index: 1000;
    font-size: 14px; pointer-events: none;
  `;
  document.body.appendChild(feedback);

  setTimeout(() => {
    feedback.remove();
  }, 1500);
}

? 注意事项与优化建议：

• ✅ title 属性天然支持悬停提示，无需额外 CSS/JS；
• ✅ 使用 innerText 而非 innerHTML，避免意外复制 HTML 标签或脚本；
• ✅ join('\n') 保证各地址行以标准换行分隔，粘贴到记事本、邮件等场景格式清晰；
• ⚠️ navigator.clipboard 在非安全上下文（HTTP）下可能受限，确保部署在 HTTPS 环境；
• ? 兼容性：Chrome 66+、Firefox 63+、Edge 79+、Safari 13.1+；旧版可降级使用 document.execCommand('copy')（需创建隐藏 ）；
• ? 如需支持“逐行点击复制单行”，可为每个

  单独绑定 onclick="copyText(this)"，并在函数中改为 element.innerText 即可。

该方案轻量、语义清晰、无障碍友好（支持键盘聚焦与 Enter 触发），是生产环境中推荐的地址复制实践。