js復制內容進入粘貼板

Amio 發(fā)布于2019-08-19 18:00 / 3306人閱讀

摘要：我們在前端開發(fā)時有時遇到這樣的需求，同過直接把或者里的值復制到粘貼板里。這里提供一個方法實現這個功能，在你的項目里直接引入就行。我們可以這樣直接調用這個方法這樣為的值進入了粘貼板了。

我們在前端開發(fā)時有時遇到這樣的需求，同過button直接把input 或者textarea里的值復制到粘貼板里。
這里提供一個方法實現這個功能，在你的項目里直接引入就行。

function copyToClipboard(elem) {
    // create hidden text element, if it doesn"t already exist
    var targetId = "_hiddenCopyText_";
    var isInput = elem.tagName === "INPUT" || elem.tagName === "TEXTAREA";
    var origSelectionStart, origSelectionEnd;
    if (isInput) {
        // can just use the original source element for the selection and copy
        target = elem;
        origSelectionStart = elem.selectionStart;
        origSelectionEnd = elem.selectionEnd;
    } else {
        // must use a temporary form element for the selection and copy
        target = document.getElementById(targetId);
        if (!target) {
            var target = document.createElement("textarea");
            target.style.position = "absolute";
            target.style.left = "-9999px";
            target.style.top = "0";
            target.id = targetId;
            document.body.appendChild(target);
        }
        target.textContent = elem.textContent;
    }
    // select the content
    var currentFocus = document.activeElement;
    target.focus();
    target.setSelectionRange(0, target.value.length);

    // copy the selection
    var succeed;
    try {
        succeed = document.execCommand("copy");
    } catch(e) {
        succeed = false;
    }
    // restore original focus
    if (currentFocus && typeof currentFocus.focus === "function") {
        currentFocus.focus();
    }

    if (isInput) {
        // restore prior selection
        elem.setSelectionRange(origSelectionStart, origSelectionEnd);
    } else {
        // clear temporary content
        target.textContent = "";
    }
    return succeed;
}

我們可以這樣直接調用這個方法：

copyToClipboard(document.getElementById("name"));

這樣id為name的值進入了粘貼板了。

云服務器 GPU云服務器 js復制到粘貼板復制粘貼js代碼 js手機復制粘貼功能 js復制到剪切板

文章版權歸作者所有，未經允許請勿轉載,若此文章存在違規(guī)行為，您可以聯系管理員刪除。

轉載請注明本文地址：http://systransis.cn/yun/79075.html

前端er怎樣操作剪切復制以及禁止復制+破解等

摘要：取消默認的復制事件被復制的文字等下插入防知乎掘金復制一兩個字則不添加版權信息超過一定長度的文字就添加版權信息作者鏈接來源掘金著作權歸作者所有。以上參考資料高程操作剪貼板網頁上如何實現禁止復制粘貼以及如何破解原生實現點擊按鈕復制文本 showImg(https://segmentfault.com/img/remote/1460000015942602?w=1280&h=720); 前言...

mikasa 2019-08-29 16:20 評論0 收藏0
前端er怎樣操作剪切復制以及禁止復制+破解等

摘要：取消默認的復制事件被復制的文字等下插入防知乎掘金復制一兩個字則不添加版權信息超過一定長度的文字就添加版權信息作者鏈接來源掘金著作權歸作者所有。以上參考資料高程操作剪貼板網頁上如何實現禁止復制粘貼以及如何破解原生實現點擊按鈕復制文本 showImg(https://segmentfault.com/img/remote/1460000015942602?w=1280&h=720); 前言...

amuqiao 2019-08-23 10:51 評論0 收藏0
前端er怎樣操作剪切復制以及禁止復制+破解等

摘要：取消默認的復制事件被復制的文字等下插入防知乎掘金復制一兩個字則不添加版權信息超過一定長度的文字就添加版權信息作者鏈接來源掘金著作權歸作者所有。以上參考資料高程操作剪貼板網頁上如何實現禁止復制粘貼以及如何破解原生實現點擊按鈕復制文本 showImg(https://segmentfault.com/img/remote/1460000015942602?w=1280&h=720); 前言...

DevTalking 2019-08-02 11:11 評論0 收藏0
復制粘貼有那么麻煩嗎？理解VIM的文本復制

摘要：反過來，在的模式下，按命令開始選擇一段文本，然后按下，就把文字復制到系統(tǒng)的剪切板了，隨便找個文本編輯器如，按，就會發(fā)現剛才復制的內容粘貼出來了。 Vim的文本復制，邏輯上要比我們日常的拷貝、粘貼要復雜些。之前看了很多文章，真是太復雜了，復制個東西搞得好像系統(tǒng)性的工程建設一樣。其實兩句話就解釋明白的。參考這篇文章：vim的剪切板首先輸入:reg命令，查看Vim記錄的所有剪切板內容，大...

JowayYoung 2019-06-28 10:30 評論0 收藏0
js獲取剪切板內容，js控制圖片粘貼。

摘要：在用戶執(zhí)行粘貼操作的時候，能夠獲得剪切板的內容，本文討論一下這個問題。目前只有支持獲取剪切板中的圖片數據。這么多的判斷條件，基本可以確定通過剪切板過來的是粘貼的文件。在用戶執(zhí)行粘貼操作的時候，js能夠獲得剪切板的內容，本文討論一下這個問題。目前只有Chrome支持獲取剪切板中的圖片數據。還好需要這個功能的產品目前只支持Chrome和Safari，一些Chrome的新特性是可以盡情使...

KaltZK 2019-08-19 17:22 評論0 收藏0