iOS移动webview执行document.execCommand('copy')触发键盘弹出如何解决

问题原因 #

调用select()方法选中输入类元素时，iOS系统默认会触发元素聚焦，自动唤起软键盘。

解决方案 #

方案1：修改原有元素属性，复制后立即失焦 #

在原有实现基础上补充只读设置、手动失焦逻辑即可解决：

const codeEle = document.getElementById("code");
// 先设置只读属性，阻断默认输入唤起行为
codeEle.setAttribute("readonly", true);
codeEle.select();
// 兼容低版本iOS的选中逻辑，避免部分设备select不生效
codeEle.setSelectionRange(0, codeEle.value.length);
document.execCommand("copy");
// 复制完成后立即移除只读属性并失焦，收起键盘
codeEle.removeAttribute("readonly");
codeEle.blur();

方案2：使用临时离屏元素执行复制 #

完全不操作原有可见元素，创建临时不可见元素执行复制逻辑，从根源避免聚焦触发键盘：

// 创建临时文本域
const tempTextarea = document.createElement("textarea");
// 赋值需要复制的内容
tempTextarea.value = document.getElementById("code").value;
// 设置元素完全不可见，不影响页面布局
tempTextarea.style.position = "absolute";
tempTextarea.style.opacity = "0";
tempTextarea.style.left = "-9999px";
tempTextarea.style.top = "-9999px";
// 插入页面DOM
document.body.appendChild(tempTextarea);
// 执行复制逻辑
tempTextarea.select();
tempTextarea.setSelectionRange(0, tempTextarea.value.length);
document.execCommand("copy");
// 复制完成后直接销毁临时元素
document.body.removeChild(tempTextarea);

方案3：使用标准Clipboard API替代废弃方法 #

document.execCommand已经被Web标准废弃，优先使用原生Clipboard API，不会触发键盘唤起：

const copyContent = document.getElementById("code").value;
navigator.clipboard.writeText(copyContent).then(() => {
  // 复制成功的回调逻辑
}).catch(() => {
  // 兼容旧设备的降级逻辑，可回退到execCommand方案
});

注意：Clipboard API要求页面运行在HTTPS环境下（localhost本地调试除外）

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