HTML如何实现点击文本时自动选中对应内容以支持复制操作？

你可以通过原生JS实现这个需求，不需要引入第三方库，实现逻辑很简单：给span元素绑定点击事件，点击时先选中元素内的文本，再调用浏览器的复制接口即可。

完整实现代码 #

1. HTML 部分 #

给需要支持点击复制的span加个自定义类，方便统一绑定事件：

<span class="copyable-text">Colour</span>

2. CSS 可选优化 #

给可复制文本加样式提示用户可以点击：

.copyable-text {
  /* 鼠标悬浮显示手型 */
  cursor: pointer;
  /* 点击时自动全选文本，增强交互提示 */
  user-select: all;
}

3. JS 功能实现 #

有两种常用的复制实现方案，你可以根据兼容需求选择：

方案一：兼容性最好的写法（支持所有主流浏览器）

用document.execCommand接口，缺点是官方已经标记为废弃，但目前所有浏览器都还支持：

document.querySelectorAll('.copyable-text').forEach(el => {
  el.addEventListener('click', function() {
    // 选中当前span内的所有文本
    const selection = window.getSelection();
    const range = document.createRange();
    range.selectNodeContents(this);
    selection.removeAllRanges();
    selection.addRange(range);

    try {
      // 执行复制操作
      document.execCommand('copy');
      // 复制成功后的提示，这里示例是临时改文字颜色1秒，你也可以换成自己的toast提示
      this.style.color = '#27ae60';
      setTimeout(() => this.style.color = '', 1000);
    } catch (err) {
      console.error('复制失败，请手动选中复制', err);
    }

    // 不需要保留选中状态的话可以打开下面的注释，复制完自动取消选中
    // selection.removeAllRanges();
  })
})

方案二：现代浏览器标准写法

用官方推荐的Clipboard API，只支持HTTPS环境（本地开发localhost也兼容）：

document.querySelectorAll('.copyable-text').forEach(el => {
  el.addEventListener('click', async function() {
    const text = this.textContent.trim();
    try {
      await navigator.clipboard.writeText(text);
      // 复制成功提示
      this.style.color = '#27ae60';
      setTimeout(() => this.style.color = '', 1000);
    } catch (err) {
      console.error('复制失败，请手动选中复制', err);
    }
  })
})

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