移动端自动调用navigator.clipboard.writeText失效问题求助

移动端浏览器出于安全策略，禁止非用户主动交互触发剪贴板操作。navigator.clipboard.writeText必须在用户明确的点击、触摸等交互事件内执行，你代码里通过window.onload、setTimeout自动调用的方式不属于用户主动触发行为，因此被浏览器拦截。桌面浏览器对这类限制相对宽松，所以能正常运行。

把自动复制逻辑改成由用户主动点击按钮触发，同时优化移动端文本选择逻辑：

修改后的代码 #

HTML部分 #

<input type="text" value="<?php echo $_GET['pin'];?>" id="myInput" readonly>
<button id="copyBtn">复制PIN码</button>

添加readonly属性避免用户误修改，同时明确显示触发按钮。

JavaScript部分 #

async function myFunction() {
  const copyText = document.getElementById("myInput");
  // 适配移动端文本选择
  copyText.focus();
  copyText.setSelectionRange(0, copyText.value.length);
  
  try {
    await navigator.clipboard.writeText(copyText.value);
    alert("已复制PIN码: " + copyText.value);
    // 复制后自动关闭窗口，放在用户交互后执行
    setTimeout(() => window.close(), 500);
  } catch (err) {
    // 处理复制失败的降级方案
    alert("复制失败，请手动复制");
  }
}

// 绑定按钮点击事件，确保是用户主动触发
document.getElementById("copyBtn").addEventListener("click", myFunction);

// 页面加载后自动聚焦输入框，提升用户体验
window.onload = function() {
  document.getElementById("myInput").focus();
};

额外说明 #

• 务必保证剪贴板操作在用户交互事件（click/touchstart等）的回调内执行，这是移动端浏览器的强制安全要求。
• 添加try/catch可捕获复制失败场景（比如用户拒绝权限、浏览器不支持等），给用户明确提示。
• 自动关闭窗口的逻辑放在用户交互后执行，能避免被浏览器拦截。

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