Safari中下拉框onChange触发剪贴板复制失败问题排查

问题场景 #

原本实现了一个功能：用户选择下拉菜单选项时，将对应文本写入剪贴板。以下代码在除Safari外的浏览器均可正常运行：

<select onChange="writeTextToClipboard(this.value);">
  <option value="Text I want to copy">Copy to clipboard</option>
</select>

function writeTextToClipboard(value) {
  navigator.clipboard.writeText(value);
}

了解到Safari对剪贴板API的特殊要求后，参考资料修改了代码，但在Safari 17.0中仍抛出错误：
NotAllowedError: The request is not allowed by the user agent or the platform in the current context, possibly because the user denied permission.

修改后的代码：

async function writeTextToClipboard(value) {
  // Safari, Chrome
  if(typeof ClipboardItem && navigator.clipboard.write) {
    const type = 'text/plain'
    const blob = new Blob([value], {type})
    const cbi = new ClipboardItem({[type]: blob})
    await navigator.clipboard.write([cbi])
    console.log(`Copied: ${value}`)
  }
  // Firefox
  else {
    navigator.clipboard.writeText(value);
  }
}

已排查信息 #

• 代码在按钮onClick事件中可正常执行，但select的onChange事件触发时就会报错
• 不想通过重构下拉框为非select元素的方式解决问题
• 旧方案中使用的execCommand()已废弃，无法使用

解决方案 #

Safari的剪贴板API对用户交互的触发上下文有严格限制，select的onChange事件在Safari中不被视为“可信的用户交互”（按钮点击属于可信交互）。可以通过以下方式绕过限制：

方法1：利用select的mouseup事件辅助触发 #

通过监听select的onMouseUp事件记录用户交互状态，再在onChange中判断状态后执行剪贴板操作：

<select id="copySelect">
  <option value="Text I want to copy">Copy to clipboard</option>
</select>

<script>
let userInteracted = false;

document.getElementById('copySelect').addEventListener('mouseup', () => {
  userInteracted = true;
});

document.getElementById('copySelect').addEventListener('change', async (e) => {
  if (!userInteracted) return;
  userInteracted = false;
  await writeTextToClipboard(e.target.value);
});

async function writeTextToClipboard(value) {
  try {
    // 优先使用标准writeText，兼容多数浏览器
    await navigator.clipboard.writeText(value);
    console.log(`Copied: ${value}`);
  } catch (err) {
    // 降级处理Safari特殊情况
    if (typeof ClipboardItem !== 'undefined' && navigator.clipboard.write) {
      const type = 'text/plain';
      const blob = new Blob([value], { type });
      const cbi = new ClipboardItem({ [type]: blob });
      await navigator.clipboard.write([cbi]);
      console.log(`Copied via ClipboardItem: ${value}`);
    } else {
      throw err;
    }
  }
}
</script>

方法2：添加确认按钮（折中方案） #

如果上述方法仍不稳定，可以在用户选择下拉选项后，显示一个确认按钮，让用户主动点击完成复制，确保触发上下文符合Safari要求：

<select id="copySelect">
  <option value="Text I want to copy">Copy to clipboard</option>
</select>
<button id="confirmCopy" style="display:none;">点击复制</button>

<script>
document.getElementById('copySelect').addEventListener('change', (e) => {
  document.getElementById('confirmCopy').style.display = 'inline-block';
  document.getElementById('confirmCopy').dataset.value = e.target.value;
});

document.getElementById('confirmCopy').addEventListener('click', async (e) => {
  await writeTextToClipboard(e.target.dataset.value);
  e.target.style.display = 'none';
});

async function writeTextToClipboard(value) {
  try {
    await navigator.clipboard.writeText(value);
    console.log(`Copied: ${value}`);
  } catch (err) {
    if (typeof ClipboardItem !== 'undefined' && navigator.clipboard.write) {
      const type = 'text/plain';
      const blob = new Blob([value], { type });
      const cbi = new ClipboardItem({ [type]: blob });
      await navigator.clipboard.write([cbi]);
      console.log(`Copied via ClipboardItem: ${value}`);
    } else {
      console.error('复制失败:', err);
    }
  }
}
</script>

原理说明 #

Safari对剪贴板操作的安全限制要求操作必须由明确的用户交互动作触发（比如鼠标点击、键盘按键等）。select的onChange事件虽由用户操作引发，但在Safari安全机制中不属于直接的“可信交互触发点”，而mouseup或按钮click事件属于这类可信触发点，通过关联两类事件，可让剪贴板操作符合Safari安全要求。

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