JavaScript 剪切板操作方法 execCommand() 笔记

JavaScript 剪切板操作的传统方法是 document.execCommand()，其支持复制、剪切和粘贴操作。具体操作方法如下：

• 复制操作：document.execCommand('copy')
• 剪切操作：document.execCommand('cut')
• 粘贴操作：document.execCommand('paste')

使用 document.execCommand() 方法的优点是所有浏览器都支持，包括旧版本的浏览器，且无需额外申请权限。

不过，在使用该方法进行复制时，需要注意，不仅要选中文本，对于有些浏览器，还需要 focus，否则可能会导致无法复制选中文本到剪切板。具体示例，如下：

// 创建临时textarea
var tempTextArea = document.createElement('textarea');
tempTextArea.value = "Hello World!";
document.body.appendChild(tempTextArea);
    
// 选中并复制
tempTextArea.select();
tempTextArea.setSelectionRange(0, 99999); // 移动设备兼容

// 某些浏览器需要可聚焦
tempTextArea.focus();

// 复制到剪切板
var successful = document.execCommand('copy');
if (successful)  {
    alert("复制成功");
} else {
    alert("复制失败");
}

注：上述代码示例是基于AI生成代码修改得到的。

 

参考资料

[1] 剪贴板操作 Clipboard API 教程. https://www.ruanyifeng.com/blog/2021/01/clipboard-api.html