iPhone浏览器复制含冒号内容遭URL编码的解决方案求助

当使用navigator.clipboard.writeText()写入带半角冒号的格式化文本时，部分iPhone用户反馈粘贴内容会被URL编码（出现大量%和数字），比如原写入内容：

Name: Joe Schmo
Address:	550 W. Someplace Ave
			Anytown			55555
Phone:  555-555-5555

粘贴后变成URL编码字符串，且仅当内容包含半角冒号时触发该问题，推测是iOS或Safari更新后的识别逻辑问题。以下是可行的解决和规避方案：

方案1：使用navigator.clipboard.write()明确指定文本类型 #

通过ClipboardItem搭配Blob明确指定文本为纯文本类型，强制Safari按普通文本处理，避免触发URL编码逻辑。代码示例：

const targetText = "Name: Joe Schmo\nAddress:\t550 W. Someplace Ave\n\t\t\tAnytown\t\t\t55555\nPhone:  555-555-5555";
const textBlob = new Blob([targetText], { type: 'text/plain' });
const clipboardItem = new ClipboardItem({ 'text/plain': textBlob });

navigator.clipboard.write([clipboardItem])
  .then(() => console.log('剪贴板写入成功'))
  .catch(err => console.error('剪贴板写入失败:', err));

方案2：替换半角冒号为全角冒号（规避方案） #

如果对文本符号格式要求不严格，可以将内容中的半角冒号:替换为全角冒号：，这样不会触发Safari的URL编码识别。示例：

const originalText = "Name: Joe Schmo\nAddress:\t550 W. Someplace Ave\n\t\t\tAnytown\t\t\t55555\nPhone:  555-555-5555";
const modifiedText = originalText.replace(/:/g, '：');
navigator.clipboard.writeText(modifiedText);

方案3：使用传统文本域复制方法 #

通过创建隐藏文本域，调用document.execCommand('copy')完成复制，该方法兼容性好，不受Safari新剪贴板逻辑影响。代码示例：

const targetText = "Name: Joe Schmo\nAddress:\t550 W. Someplace Ave\n\t\t\tAnytown\t\t\t55555\nPhone:  555-555-5555";
const textarea = document.createElement('textarea');

textarea.value = targetText;
textarea.style.position = 'absolute';
textarea.style.left = '-9999px'; // 隐藏文本域

document.body.appendChild(textarea);
textarea.select();
document.execCommand('copy');
document.body.removeChild(textarea);

方案对比 #

• 方案1：符合现代Web API规范，是最优解，适合大部分新版本iOS/Safari环境。
• 方案2：实现最简单，但会改变文本格式，适合对符号样式无严格要求的场景。
• 方案3：兼容性拉满，几乎支持所有浏览器，但execCommand已被标记为废弃，可作为临时应急方案。

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