移动端JavaScript复制到剪贴板功能失效，问题原因是什么？

核心问题 #

移动端浏览器对剪贴板操作有严格的安全限制：navigator.clipboard.writeText()必须由用户主动交互事件（比如点击、触摸tap）触发，不允许页面自动加载时（如document.ready阶段）直接调用，否则会被浏览器拦截——这是浏览器为防止恶意网站未经许可操作剪贴板的隐私保护机制。

你的代码在页面加载完成后直接调用copy()，属于非用户主动触发的操作，因此被移动端浏览器阻止；而桌面端部分浏览器的限制相对宽松，所以能正常运行。

修复方案 #

将剪贴板操作绑定到用户的点击/触摸事件上，由用户主动触发复制行为：

修改后的JavaScript代码 #

$(document).ready(function() {
  // 绑定点击+触摸事件，适配移动端和桌面端
  $('#result').on('click touchstart', function() {
    copy();
  });
})

function copy() {
  var txt = document.getElementById("result");
  navigator.clipboard.writeText(txt.innerText)
    .then(() => {
      // 可选：复制成功后的提示，适配移动端
      alert('复制成功');
    })
    .catch(err => {
      // 处理复制失败场景，比如浏览器不支持、权限被拒
      console.error('复制失败:', err);
    });
}

对应的HTML（优化可交互提示） #

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<!-- 加cursor样式让用户知道元素可点击 -->
<div id="result" style="cursor:pointer;">copy text</div>

额外注意点 #

• 部分移动端浏览器要求网站运行在HTTPS环境下（本地localhost开发除外），否则剪贴板API会失效。
• 建议保留错误捕获逻辑，避免复制失败时无反馈，提升用户体验。

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