Safari中如何排除内联控件元素被复制到文本中？

问题说明 #

在Chrome中给内联按钮设置user-select: none;后，选中整段文本复制时会自动排除按钮内容；但Safari里即使设置了-webkit-user-select: none;，视觉上按钮未被选中，复制粘贴却仍会包含按钮内的文本。比如选中1<button>2</button>3后，目标是复制结果为13而非123。

解决方案 #

方案一：纯CSS实现（无需JS） #

通过伪元素渲染按钮文本，隐藏按钮内部的实际文本，既保留按钮的交互性和视觉表现，又避免复制时读取到按钮文本。

button {
  -webkit-user-select: none;
  user-select: none;
  display: inline-block;
  vertical-align: middle; /* 保证按钮与文本对齐 */
}
/* 用伪元素展示按钮文本 */
button::before {
  content: attr(data-btn-text);
}
/* 隐藏按钮内的真实文本，防止被复制 */
button .btn-text {
  display: none;
}

1<button data-btn-text="2"><span class="btn-text">2</span></button>3

方案二：Clipboard API拦截复制事件（通用型） #

监听全局copy事件，手动筛选掉带有user-select: none属性的元素内容，再将处理后的纯文本写入剪贴板。

button {
  -webkit-user-select: none;
  user-select: none;
}

1<button>2</button>3

document.addEventListener('copy', function(e) {
  e.preventDefault();
  const selection = window.getSelection();
  if (!selection.rangeCount) return;

  const range = selection.getRangeAt(0);
  const clonedContent = range.cloneContents();
  // 筛选所有需要排除的元素
  const excludeElements = clonedContent.querySelectorAll(
    '[style*="user-select: none"], [style*="-webkit-user-select: none"], button'
  );
  
  excludeElements.forEach(el => el.remove());
  const pureText = clonedContent.textContent.trim();
  e.clipboardData.setData('text/plain', pureText);
});

方案对比 #

• 方案一无需JavaScript，兼容性好，适合按钮文本固定的场景；
• 方案二更灵活，适配动态内容或批量处理多个user-select: none元素的场景，需确保页面在HTTPS环境下（默认允许剪贴板权限）。

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