如何将文本复制到剪贴板(多浏览器)?

相关:Trello如何访问用户的剪贴板?


当前回答

由于Chrome 42+和Firefox 41+现在支持document.execCommand('copy')命令,我结合Tim Down的旧答案和Google Developer的答案,创建了两个跨浏览器复制到剪贴板的功能:

函数selectElementContents(el){//复制textarea、pre、div等。if(document.body.createTextRange){//Internet Explorervar textRange=document.body.createTextRange();text范围.移动到元素文本(el);text范围.选择();textRange.execCommand(“复制”);}否则如果(window.getSelection&&document.createRange){//非Internet Explorervar range=document.createRange();range.selectNodeContents(el);var sel=window.getSelection();sel.removeAllRanges();sel.addRange(范围);尝试{var success=document.execCommand('copy');var msg=成功?'success':'不成功';console.log('复制命令为'+msg);}捕获(错误){console.log(“糟糕,无法复制”);}}}//结束函数selectElementContents(el)函数make_copy_button(el){var copy_btn=document.createElement('input');copy_btn.type=“按钮”;el.parentNode.insertBefore(copy_btn,el.nexSibling);copy_btn.onclick=函数(){selectElementContents(el);};if(document.queryCommandSupported(“copy”)||parseInt(navigator.userAgent.match(/Chrom(e|ium)\/([0-9]+)\./)[2]) >= 42) {//复制适用于Internet Explorer 4+、Chrome 42+、Firefox 41+、Opera 29+copy_btn.value=“复制到剪贴板”;}其他{//仅适用于Safari和旧版Chrome、Firefox和Operacopy_btn.value=“全选(然后按Ctrl+C复制)”;}}/*注意:document.queryCommandSupported(“copy”)在支持复制的浏览器上应返回“true”,但Chrome版本42到47中存在一个错误,使其返回“false”。所以在那些版本的Chrome功能检测不起作用!看见https://code.google.com/p/chromium/issues/detail?id=476508*/make_copy_button(document.getElementById(“标记”));<pre-id=“markup”>可以通过跨浏览器支持复制或选择的文本。</pre>

其他回答

如果您想要一个真正简单的解决方案(集成时间不到5分钟),并且开箱即用看起来很好,那么Clippy是一些更复杂解决方案的一个不错的替代方案。

它是由GitHub的一位联合创始人撰写的。Flash嵌入代码示例如下:

<object
    classid="clsid:d27cdb6e-ae6d-11cf-96b8-444553540000"
    width="110"
    height="14"
    id="clippy">

    <param name="movie" value="/flash/clippy.swf"/>
    <param name="allowScriptAccess" value="always"/>
    <param name="quality" value="high"/>
    <param name="scale" value="noscale"/>
    <param NAME="FlashVars" value="text=#{text}"/>
    <param name="bgcolor" value="#{bgcolor}"/>
    <embed
        src="/flash/clippy.swf"
        width="110"
        height="14"
        name="clippy"
        quality="high"
        allowScriptAccess="always"
        type="application/x-shockwave-flash"
        pluginspage="http://www.macromedia.com/go/getflashplayer"
        FlashVars="text=#{text}"
        bgcolor="#{bgcolor}"/>
</object>

记住用需要复制的文本替换#{text},用颜色替换#{bgcolor}。

以下方法适用于Chrome、Firefox、Internet Explorer和Edge以及Safari的最新版本(2016年10月发布的第10版增加了复制支持)。

创建一个文本区域,并将其内容设置为要复制到剪贴板的文本。将文本区域附加到DOM。在文本区域中选择文本。调用document.execCommand(“copy”)从dom中删除文本区域。

注意:您不会看到文本区域,因为它是在Javascript代码的同一同步调用中添加和删除的。

如果您自己执行此操作,请注意以下事项:

出于安全原因,这只能从事件处理程序(如单击)调用(与打开窗口一样)。首次更新剪贴板时,Internet Explorer将显示权限对话框。Internet Explorer和Edge将在文本区域聚焦时滚动。execCommand()在某些情况下可能抛出。除非您使用文本区域,否则换行符和制表符可能会被吞入。(大多数文章似乎都建议使用div)当显示Internet Explorer对话框时,文本区域将可见,您需要隐藏它,或使用Internet Explorer特定的剪贴板数据API。在Internet Explorer中,系统管理员可以禁用剪贴板API。

下面的函数应该尽可能干净地处理以下所有问题。如果您发现任何问题或有任何改进建议,请留言。

// Copies a string to the clipboard. Must be called from within an
// event handler such as click. May return false if it failed, but
// this is not always possible. Browser support for Chrome 43+,
// Firefox 42+, Safari 10+, Edge and Internet Explorer 10+.
// Internet Explorer: The clipboard feature may be disabled by
// an administrator. By default a prompt is shown the first
// time the clipboard is used (per session).
function copyToClipboard(text) {
    if (window.clipboardData && window.clipboardData.setData) {
        // Internet Explorer-specific code path to prevent textarea being shown while dialog is visible.
        return window.clipboardData.setData("Text", text);

    }
    else if (document.queryCommandSupported && document.queryCommandSupported("copy")) {
        var textarea = document.createElement("textarea");
        textarea.textContent = text;
        textarea.style.position = "fixed";  // Prevent scrolling to bottom of page in Microsoft Edge.
        document.body.appendChild(textarea);
        textarea.select();
        try {
            return document.execCommand("copy");  // Security exception may be thrown by some browsers.
        }
        catch (ex) {
            console.warn("Copy to clipboard failed.", ex);
            return prompt("Copy to clipboard: Ctrl+C, Enter", text);
        }
        finally {
            document.body.removeChild(textarea);
        }
    }
}

https://jsfiddle.net/fx6a6n6x/

JavaScript/TypeScript中最简单的方法是使用此命令

navigator.clipboard.writeText(textExample);

只需在textExample中传递要复制到剪贴板的值

其他方法将纯文本复制到剪贴板。要复制HTML(即,可以将结果粘贴到所见即所得编辑器中),只能在Internet Explorer中执行以下操作。这与其他方法有根本不同,因为浏览器实际上可以直观地选择内容。

// Create an editable DIV and append the HTML content you want copied
var editableDiv = document.createElement("div");
with (editableDiv) {
    contentEditable = true;
}
editableDiv.appendChild(someContentElement);

// Select the editable content and copy it to the clipboard
var r = document.body.createTextRange();
r.moveToElementText(editableDiv);
r.select();
r.execCommand("Copy");

// Deselect, so the browser doesn't leave the element visibly selected
r.moveToElementText(someHiddenDiv);
r.select();

这是我对那个的看法。。。

function copy(text) {
    var input = document.createElement('input');
    input.setAttribute('value', text);
    document.body.appendChild(input);
    input.select();
    var result = document.execCommand('copy');
    document.body.removeChild(input);
    return result;
 }

@korayem:请注意,使用html输入字段不会尊重换行符,\n并且会将任何文本展平为单行。

正如@nikksan在评论中提到的,使用textarea可以解决以下问题:

function copy(text) {
    var input = document.createElement('textarea');
    input.innerHTML = text;
    document.body.appendChild(input);
    input.select();
    var result = document.execCommand('copy');
    document.body.removeChild(input);
    return result;
}