需要使用到三个document方法:
1. document.execCommand(); 执行某个命令
2. document.queryCommandSupported(); 检测浏览器是否支持某个命令
3. document.queryCommandEnabled(); 检测当前状态下某个命令是否可用
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <meta http-equiv="X-UA-Compatible" content="ie=edge"> <title>Document</title> </head> <body> <input type="button" value="Copy" onclick="doCopy()"> <script> function doCopy() { // document.queryCommandSupported()方法返回一个布尔值，表示浏览器是否支持document.execCommand()的某个命令 if (document.queryCommandSupported('copy')) { copyText('你好, 世界'); } else { console.log('当前浏览器不支持 copy命令'); } } function copyText(text) { var input = document.createElement('textarea'); document.body.appendChild(input); // 将文本赋值给输入框 input.value = text; // 聚焦并选中 input.focus(); input.select(); // document.queryCommandEnabled()方法返回一个布尔值，表示当前是否可用document.execCommand()的某个命令。 // 比如copy命令只有存在文本选中时才可用，如果没有选中文本，就不可用。 if (document.queryCommandEnabled('copy')) { // 执行 copy 命令 var success = document.execCommand('copy'); // 移除输入框节点 input.remove(); console.log('Copy Ok'); } else { console.log('queryCommandEnabled is false'); } } </script> </body> </html>
注意:
1. document.execCommand() 支持的命令很多, 详情可以点这里: https://developer.mozilla.org/zh-CN/docs/Web/API/Document/execCommand
2. 这三个方法核心是第一个, 可以使用它们的节点有: 输入框相关节点 / document.designMode为"on"时的文档 / contenteditable属性为true的节点.