怎樣使用js將文本複製到系統粘貼板中

須要使用到三個document方法:html

1. document.execCommand(); 執行某個命令瀏覽器

2. document.queryCommandSupported(); 檢測瀏覽器是否支持某個命令app

3. document.queryCommandEnabled(); 檢測當前狀態下某個命令是否可用ui

<!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>

注意: url

1. document.execCommand() 支持的命令不少, 詳情能夠點這裏: https://developer.mozilla.org/zh-CN/docs/Web/API/Document/execCommandspa

2. 這三個方法核心是第一個, 能夠使用它們的節點有: 輸入框相關節點 / document.designMode爲"on"時的文檔 / contenteditable屬性爲true的節點..net