通过为地址容器添加点击事件和 title 提示，配合 innertext 提取与 navigator.clipboard.writetext() 写入，可一键复制多行地址文本，无需表单元素，兼容现代浏览器。
通过为地址容器添加点击事件和 title 提示，配合 innertext 提取与 navigator.clipboard.writetext() 写入，可一键复制多行地址文本，无需表单元素，兼容现代浏览器。
要实现“点击任意一行地址即可复制完整地址”的交互效果，关键在于避免使用语义不当的 <button> 包裹多个 <p>（HTML 不允许块级元素嵌套在 <button> 中，会导致 DOM 解析异常和可访问性问题），同时需正确获取并格式化多行文本内容。
✅ 推荐方案：使用 <div> 作为可点击容器，并利用 innerText 自动提取纯文本内容（保留换行逻辑）
<div onclick="copyAddress(this)" title="Click to copy full address" class="address-block"> <p>Address line 1</p> <p>Address line 2</p> <p>Address line 3</p> <p>County</p> <p>Post code</p> </div>
对应 JavaScript 函数如下（已修复原始代码中的语法错误与逻辑缺陷）：
function copyAddress(container) {
// 获取所有子段落的纯文本内容，用换行符连接（更符合地址阅读习惯）
const lines = Array.from(container.querySelectorAll('p')).map(p => p.innerText.trim());
const fullAddress = lines.filter(line => line).join('\n'); // 过滤空行，用 \n 分隔
navigator.clipboard.writeText(fullAddress)
.then(() => {
// 可选：视觉反馈（如临时 tooltip 或 toast）
showCopyFeedback();
})
.catch(err => {
console.error('Failed to copy address:', err);
alert('Copying failed. Please try again.');
});
}
function showCopyFeedback() {
const feedback = document.createElement('div');
feedback.textContent = '✓ Address copied!';
feedback.style.cssText = `
position: fixed;
top: 20px;
right: 20px;
background: #4CAF50;
color: white;
padding: 10px 16px;
border-radius: 4px;
z-index: 1000;
font-size: 14px;
box-shadow: 0 2px 8px rgba(0,0,0,0.2);
`;
document.body.appendChild(feedback);
setTimeout(() => {
feedback.remove();
}, 2000);
}? 重要注意事项：
- navigator.clipboard.writeText() 需运行在安全上下文（即 https:// 或 localhost），HTTP 站点将被拒绝调用；
- innerText 自动处理换行与空白，比 innerHTML + <br> 更可靠且无 XSS 风险；
- 不建议为每个 <p> 单独绑定 onclick——那样会复制单行而非完整地址；统一由父容器触发更符合需求；
- title="Click to copy" 提供原生悬停提示，轻量且无障碍友好（屏幕阅读器可识别）；
- 如需更高定制性（如图标、动画反馈），可结合 CSS :hover 和 ::after 伪元素增强视觉提示。
该方案简洁、健壮、语义清晰，兼顾可用性、可访问性与现代 Web 标准。
