js復(fù)制文本到粘貼板(Clipboard.writeText())

更新時間：2022年07月01日 15:34:10 作者：Moshow鄭鍇

這篇文章主要介紹了js復(fù)制文本到粘貼板(Clipboard.writeText())，具有很好的參考價值，希望對大家有所幫助。如有錯誤或未考慮完全的地方，望不吝賜教

復(fù)制文本到粘貼板(Clipboard.writeText())

js如何復(fù)制文本到粘貼板呢，網(wǎng)上所說的各種復(fù)制。。在Chrome或者說在我這個項目都沒用。

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

網(wǎng)上的代碼

通過 document.execCommand('copy') 來操作。

    //創(chuàng)建選中范圍
    var range = document.createRange();
    range.selectNode(copyDom);
    //移除剪切板中內(nèi)容
    window.getSelection().removeAllRanges();
    //添加新的內(nèi)容到剪切板
    window.getSelection().addRange(range);
    //復(fù)制
    var successful = document.execCommand('copy');

通過 window.clipboardData.setData('Text',textVal) 這個對象來操作的。可是都不work。

/**
* 復(fù)制代碼
 */
$('#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

拷貝文字不應(yīng)當(dāng)是一件困難的事. 不需要過多繁雜的配置或者下載很多腳本文件. 最重要的，它不應(yīng)該依賴flash或者其他框架，應(yīng)該保持簡潔，clipboard.js

1.通過cdn引入

<script src="http://cdn.staticfile.org/clipboard.js/2.0.4/clipboard.min.js"></script>

2.使用功能

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

3.查看效果

在這里插入圖片描述

4.這個功能正常是可以的，但是可能我用了CodeMirror或者其他js導(dǎo)致沖突。

Clipboard.writeText()

以下場景是來自CodeGenerator的復(fù)制功能：

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

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

兼容性：Chrome66以上/Firefox63以上

在這里插入圖片描述

效果展示：

在這里插入圖片描述

復(fù)制內(nèi)容到剪貼板（無插件，兼容所有瀏覽器）

HTML部分:

<button onclick="copyToClip('內(nèi)容')"> Copy </button>

JS部分:

/**
?* 復(fù)制單行內(nèi)容到粘貼板
?* content : 需要復(fù)制的內(nèi)容
?* message : 復(fù)制完后的提示，不傳則默認提示"復(fù)制成功"
?*/
function copyToClip(content, message) {
? ? var aux = document.createElement("input");?
? ? aux.setAttribute("value", content);?
? ? document.body.appendChild(aux);?
? ? aux.select();
? ? document.execCommand("copy");?
? ? document.body.removeChild(aux);
? ? if (message == null) {
? ? ? ? alert("復(fù)制成功");
? ? } else{
? ? ? ? alert(message);
? ? }
}

【補充】

如果你想復(fù)制多行數(shù)據(jù)的話，可以采用如下方法。

/**
?* 復(fù)制多行內(nèi)容到粘貼板
?* contentArray: 需要復(fù)制的內(nèi)容（傳一個字符串?dāng)?shù)組）
?* message : 復(fù)制完后的提示，不傳則默認提示"復(fù)制成功"
?*/
function copyToClip(contentArray, message) {
?? ?var contents = "";
?? ?for (var i = 0; i < contentArray.length; i++) {
?? ??? ?contents += contentArray[i] + "\n";
?? ?}
?? ?const textarea = document.createElement('textarea');
?? ?textarea.value = contents;
?? ?document.body.appendChild(textarea);
?? ?textarea.select();
?? ?if (document.execCommand('copy')) {
?? ??? ?document.execCommand('copy');
?? ?}
?? ?document.body.removeChild(textarea);
? ? if (message == null) {
? ? ? ? alert("復(fù)制成功");
? ? } else{
? ? ? ? alert(message);
? ? }
}

以上為個人經(jīng)驗，希望能給大家一個參考，也希望大家多多支持腳本之家。

您可能感興趣的文章: