【前端】实现CSDN等博客文章复制时带上自定义字符串的功能

阅读数: 2021-05-24

实现CSDN等博客文章复制时带上自定义字符串的功能

function getClipboardText() {
    var clipboardData = window.getSelection() || "";
    return clipboardData;
}

function setClipboardText(value) {
    var inputElement = document.createElement("input");

    inputElement.value = value;
    document.body.appendChild(inputElement);
    inputElement.select();
    document.execCommand("copy");
    inputElement.remove();
}

function onCopy() {
    document.removeEventListener("copy", onCopy);

    var text = getClipboardText();

    text =
        text +
        "\n" +
        "this is copy from ionluo, copyright all belong to ionluo.(^ ~ ^)";

    setClipboardText(text);

    document.addEventListener("copy", onCopy);
}

window.onload = function () {
    document.addEventListener("copy", onCopy);
};

JS复制输入框中的文字

const copyToClipboard = function () {
    const copyInput = document.getElementById('copyInput')
    const enableCopy = document.execCommand('copy')
    if (enableCopy) {
        copyInput.focus()
        copyInput.select()
    }

    try {
        if (document.execCommand('copy', false, null)) {
            console.log('copy success')
            copyInput.blur()
        } else {
            console.log('copy failed, please copy manually')
            copyInput.select()
        }
    } catch (err) {
        console.log('error', err)
    }
}

本文作者： ionluo
本文链接： http://www.ionluo.cn/blog/posts/bdc99a5d.html
版权声明： 本作品采用知识共享署名-非商业性使用-相同方式共享 4.0 国际许可协议进行许可。转载请注明出处！