怎样使用js将文本复制到系统粘贴板中

需要使用到三个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的节点.