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

 

发布评论

分享到:

IT源码网

微信公众号号:IT虾米 (左侧二维码扫一扫)欢迎添加!

怎样创建一个子树遍历器讲解
你是第一个吃螃蟹的人
发表评论

◎欢迎参与讨论,请在这里发表您的看法、交流您的观点。