js复制文本到粘贴板（Clipboard.writeText()）

阳光穿透心脏的1/2处 2023-06-13 04:47 48阅读 0赞

## 前言 ##

js如何复制文本到粘贴板呢，网上所说的各种复制。。在Chrome或者说在我这个项目都没用。

*  windows.copy
 *  document.execCommand(“copy”);
 *  clipboard.js
 *  `Clipboard.writeText()` ，可行！

## 网上的代码 ##

通过 `document.execCommand('copy')` 来操作。

//创建选中范围
        var range = document.createRange();
        range.selectNode(copyDom);
        //移除剪切板中内容
        window.getSelection().removeAllRanges();
        //添加新的内容到剪切板
        window.getSelection().addRange(range);
        //复制
        var successful = document.execCommand('copy');

通过 `window.clipboardData.setData('Text',textVal)` 这个 对象来操作的。可是都不work。

/** * 复制代码 */
    $('#btnCopy').bind('click', function (e) { 
        if (!$.isEmptyObject(codeData)) { 
            //support IE
            var clipboardData = window.clipboardData;
            //support Chrome/Firefox
            if (!clipboardData) { 
                clipboardData = e.originalEvent.clipboardData;
            }
            if (!clipboardData) { 
                console.log(clipboardData);
                console.log(clipboardData.getData('text'));
                clipboardData.setData('Text', codeData[id]);
            }
            if(window != undefined){ 
               window.copy($("#genCodeArea").val());
            }
        }
    });

## clipboard.js ##

`拷贝文字`不应当是一件困难的事. 不需要过多繁杂的配置或者下载很多脚本文件. 最重要的，它不应该依赖flash或者其他框架，应该保持简洁，[clipboard.js][]

1.  通过cdn引入

1.  使用功能

<input id="copyArea" value="https://zhengkai.blog.csdn.net">
    
    
    <button class="btn" data-clipboard-target="#copyArea">
        <img src="assets/clippy.svg" alt="Copy to clipboard">
    </button>

1.  查看效果  
    ![在这里插入图片描述][20191113225258689.png]
2.  这个功能正常是可以的，但是可能我用了CodeMirror或者其他js导致冲突。

## Clipboard.writeText() ##

以下场景是来自[CodeGenerator][]的复制功能：

$('#btnCopy').on('click', function(){ 
         if(!$.isEmptyObject(genCodeArea.getValue())&&!$.isEmptyObject(navigator)&&!$.isEmptyObject(navigator.clipboard)){ 
             navigator.clipboard.writeText(genCodeArea.getValue());
             layer.msg("复制成功");
         }
     });

**来源**：https://developer.mozilla.org/en-US/docs/Web/API/Clipboard/writeText

**兼容性**：Chrome66以上/Firefox63以上  
![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly96aGVuZ2thaS5ibG9nLmNzZG4ubmV0_size_16_color_FFFFFF_t_70]

**效果展示**：![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly96aGVuZ2thaS5ibG9nLmNzZG4ubmV0_size_16_color_FFFFFF_t_70 1]

[clipboard.js]: http://www.clipboardjs.cn/
[20191113225258689.png]: https://img-blog.csdnimg.cn/20191113225258689.png
[CodeGenerator]: http://java.bejson.com/generator/
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly96aGVuZ2thaS5ibG9nLmNzZG4ubmV0_size_16_color_FFFFFF_t_70]: https://img-blog.csdnimg.cn/2019111422361243.png?x-oss-process=image/watermark,type_ZmFuZ3poZW5naGVpdGk,shadow_10,text_aHR0cHM6Ly96aGVuZ2thaS5ibG9nLmNzZG4ubmV0,size_16,color_FFFFFF,t_70
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly96aGVuZ2thaS5ibG9nLmNzZG4ubmV0_size_16_color_FFFFFF_t_70 1]: https://img-blog.csdnimg.cn/20191114223752723.png?x-oss-process=image/watermark,type_ZmFuZ3poZW5naGVpdGk,shadow_10,text_aHR0cHM6Ly96aGVuZ2thaS5ibG9nLmNzZG4ubmV0,size_16,color_FFFFFF,t_70