使用jQuery单击按钮复制到剪贴板

时间：2014-03-22 17:53:47

标签： jquery html css

如何将div中的文本复制到剪贴板？我有一个div，需要添加一个链接，将文本添加到剪贴板。这有解决方案吗？ 

<p class="content">Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s</p>

<a class="copy-text">copy Text</a>

点击复制文字后，按 Ctrl + V ，必须粘贴。

23 个答案:

答案 0 :(得分：540)

还有另一种非Flash方式（除了Clipboard API中提到的jfriend00's answer）。您需要选择文本，然后execute the command copy复制到剪贴板，无论页面上当前选择的文本是什么。

例如，此函数会将传递的元素的内容复制到剪贴板中（在PointZeroTwo的注释中更新建议）：

function copyToClipboard(element) {
    var $temp = $("<input>");
    $("body").append($temp);
    $temp.val($(element).text()).select();
    document.execCommand("copy");
    $temp.remove();
}

这是它的工作原理：

  1. 创建临时隐藏文本字段。
  2. 将元素的内容复制到该文本字段。
  3. 选择文本字段的内容。
  4. 执行命令副本，如：document.execCommand("copy")。
  5. 删除临时文本字段。

    6. 您可以在此处看到快速演示：

    function copyToClipboard(element) {
  var $temp = $("<input>");
  $("body").append($temp);
  $temp.val($(element).text()).select();
  document.execCommand("copy");
  $temp.remove();
}
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<p id="p1">P1: I am paragraph 1</p>
<p id="p2">P2: I am a second paragraph</p>
<button onclick="copyToClipboard('#p1')">Copy P1</button>
<button onclick="copyToClipboard('#p2')">Copy P2</button>
<br/><br/><input type="text" placeholder="Paste here for test" />

    主要问题是目前并非所有browsers support此功能，但您可以在以下主要功能上使用它：

    • Chrome 43
    • Internet Explorer 10
    • Firefox 41
    • Safari 10

    更新1：这也可以通过纯JavaScript解决方案（没有jQuery）来实现：

    function copyToClipboard(elementId) {

  // Create a "hidden" input
  var aux = document.createElement("input");

  // Assign it the value of the specified element
  aux.setAttribute("value", document.getElementById(elementId).innerHTML);

  // Append it to the body
  document.body.appendChild(aux);

  // Highlight its content
  aux.select();

  // Copy the highlighted text
  document.execCommand("copy");

  // Remove it from the body
  document.body.removeChild(aux);

}
    <p id="p1">P1: I am paragraph 1</p>
<p id="p2">P2: I am a second paragraph</p>
<button onclick="copyToClipboard('p1')">Copy P1</button>
<button onclick="copyToClipboard('p2')">Copy P2</button>
<br/><br/><input type="text" placeholder="Paste here for test" />

    请注意，我们在没有＃now。

    的情况下传递了id

    在下面的评论中报告madzohan，在某些情况下，64位版本的Google Chrome存在一些奇怪的问题（在本地运行该文件）。上面的非jQuery解决方案似乎解决了这个问题。

    Madzohan尝试在Safari中使用解决方案，但使用document.execCommand('SelectAll')代替.select()（在聊天和下面的评论中指定）。

    作为PointZeroTwo points out in the comments，可以改进代码，以便返回成功/失败结果。您可以在this jsFiddle上看到演示。

    更新：复制保留文本格式

    作为user pointed out in the Spanish version of StackOverflow，如果您想要按字面意思复制元素的内容，上面列出的解决方案可以很好地工作，但如果您想要将复制的文本粘贴到格式中，它们就无法正常工作（因为它被复制到input type="text"，格式为“丢失”。）

    解决方法是复制到可编辑的内容div，然后以类似的方式使用execCommand复制它。这里有一个例子 - 点击复制按钮，然后粘贴到下面的内容可编辑框中：

    function copy(element_id){
  var aux = document.createElement("div");
  aux.setAttribute("contentEditable", true);
  aux.innerHTML = document.getElementById(element_id).innerHTML;
  aux.setAttribute("onfocus", "document.execCommand('selectAll',false,null)"); 
  document.body.appendChild(aux);
  aux.focus();
  document.execCommand("copy");
  document.body.removeChild(aux);
}
    #target {
  width:400px;
  height:100px;
  border:1px solid #ccc;
}
    <p id="demo"><b>Bold text</b> and <u>underlined text</u>.</p>
<button onclick="copy('demo')">Copy Keeping Format</button> 

<div id="target" contentEditable="true"></div>

    在jQuery中，它会是这样的：

    function copy(selector){
  var $temp = $("<div>");
  $("body").append($temp);
  $temp.attr("contenteditable", true)
       .html($(selector).html()).select()
       .on("focus", function() { document.execCommand('selectAll',false,null) })
       .focus();
  document.execCommand("copy");
  $temp.remove();
}
    #target {
  width:400px;
  height:100px;
  border:1px solid #ccc;
}
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>

<p id="demo"><b>Bold text</b> and <u>underlined text</u>.</p>
<button onclick="copy('#demo')">Copy Keeping Format</button> 

<div id="target" contentEditable="true"></div>

答案 1 :(得分：426)

自2016年起编辑

截至2016年，您现在可以在大多数浏览器中将文本复制到剪贴板，因为大多数浏览器都能够使用document.execCommand("copy")以编辑方式将选择的文本复制到剪贴板。

与浏览器中的其他一些操作（如打开新窗口）一样，复制到剪贴板只能通过特定的用户操作（如鼠标单击）完成。例如，它不能通过计时器完成。

这是一个代码示例：

＆＃13;
＆＃13; 
document.getElementById("copyButton").addEventListener("click", function() {
    copyToClipboard(document.getElementById("copyTarget"));
});

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;
}
＆＃13; 
input {
  width: 400px;
}
＆＃13; 
<input type="text" id="copyTarget" value="Text to Copy"> <button id="copyButton">Copy</button><br><br>
<input type="text" placeholder="Click here and press Ctrl-V to see clipboard contents">
＆＃13;
＆＃13;
＆＃13;

这是一个更高级的演示：https://jsfiddle.net/jfriend00/v9g1x0o6/

而且，您还可以使用clipboard.js获得预先构建的库，以便为您执行此操作。

回答的旧的历史部分

出于安全原因，任何现代浏览器都不允许通过JavaScript直接复制到剪贴板。最常见的解决方法是使用Flash功能复制到剪贴板，只能通过直接用户点击触发。

如前所述，ZeroClipboard是一组流行的代码，用于管理Flash对象以进行复制。我已经用过了。如果浏览设备上安装了Flash（排除了移动设备或平板电脑），则可以使用Flash。

下一个最常见的解决方法是将剪贴板绑定文本放入输入字段，将焦点移动到该字段，并建议用户按 Ctrl + C < / kbd>复制文本。

关于该问题的其他讨论和可能的解决方法可以在之前的Stack Overflow帖子中找到：

这些要求使用Flash的现代替代方案的问题已经收到很多问题，并且没有解决方案的答案（可能因为不存在）：

Internet Explorer和Firefox曾经使用非标准API来访问剪贴板，但是他们更现代的版本已弃用这些方法（可能出于安全原因）。

有一个nascent standards effort试图想出一个＆＃34; safe＆＃34;解决最常见的剪贴板问题的方法（可能需要像Flash解决方案所要求的特定用户操作），看起来它可能部分在最新版本的Firefox和Chrome中实现，但我还没有确认

答案 2 :(得分：34)

clipboard.js是一个很好的实用程序，它允许在不使用Flash的情况下将文本或HTML数据复制到剪贴板。它非常容易使用;只需包含.js并使用以下内容：

<button id='markup-copy'>Copy Button</button>

<script>
    document.getElementById('markup-copy').addEventListener('click', function() {
        clipboard.copy({
            'text/plain': 'Markup text. Paste me into a rich text editor.',
            'text/html': '<i>here</i> is some <b>rich text</b>'
        }).then(
            function(){console.log('success'); },
            function(err){console.log('failure', err);
        });
    });
</script>

clipboard.js is also on GitHub

2016年1月15日编辑：top answer今天edited在我2015年8月发布的答案中引用了相同的API。之前的文字指示用户使用ZeroClipboard。只是想明确我没有从jfriend00的答案中扯出这个，而是反过来。

答案 3 :(得分：11)

简约是最终的成熟。
如果您不希望要显示的文本可见：

jQuery的：

$('button.copyButton').click(function(){
    $(this).siblings('input.linkToCopy').select();      
    document.execCommand("copy");
});

HTML：

<button class="copyButton">click here to copy</button>
<input class="linkToCopy" value="TEXT TO COPY"
style="position: absolute; z-index: -999; opacity: 0;"><input>

答案 4 :(得分：10)

换行符（Alvaro Montoro答复的延伸） 

var ClipboardHelper = {

    copyElement: function ($element)
    {
       this.copyText($element.text())
    },
    copyText:function(text) // Linebreaks with \n
    {
        var $tempInput =  $("<textarea>");
        $("body").append($tempInput);
        $tempInput.val(text).select();
        document.execCommand("copy");
        $tempInput.remove();
    }
};

ClipboardHelper.copyText('Hello\nWorld');
ClipboardHelper.copyElement($('body h1').first());

答案 5 :(得分：7)

没有闪存或任何其他要求的更好方法是clipboard.js。您只需在任何按钮上添加new Clipboard('.btn');，将其初始化toCopyElement，然后将ID为$(function(){ new Clipboard('.copy-text'); });的DOM内容复制到剪贴板。这是一个代码段，通过链接复制问题中提供的文字。

但有一个限制是它不适用于Safari，但它适用于所有其他浏览器，包括移动浏览器，因为它不使用flash

＆＃13;
＆＃13; 
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="https://cdn.jsdelivr.net/clipboard.js/1.5.12/clipboard.min.js"></script>

<p id="content">Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s</p>

<a class="copy-text" data-clipboard-target="#content" href="#">copy Text</a>
＆＃13; 
StoryboardManager
＆＃13;
＆＃13;
＆＃13;

答案 6 :(得分：5)

<!DOCTYPE html>
<html>
<head>
    <title></title>
    <link href="css/index.css" rel="stylesheet" />
    <script src="js/jquery-2.1.4.min.js"></script>
    <script>
        function copy()
        {
            try
            {
                $('#txt').select();
                document.execCommand('copy');
            }
            catch(e)
            {
                alert(e);
            }
        }
    </script>
</head>
<body>
    <h4 align="center">Copy your code</h4>
    <textarea id="txt" style="width:100%;height:300px;"></textarea>
    <br /><br /><br />
    <div align="center"><span class="btn-md" onclick="copy();">copy</span></div>
</body>
</html>

答案 7 :(得分：4)

这是复制内容的最简单方法

 <div id="content"> Lorepm ispum </div>
 <button class="copy" title="content">Copy Sorce</button>

function SelectContent(element) {
                        var doc = document
                            , text = doc.getElementById(element)
                            , range, selection
                        ;    
                        if (doc.body.createTextRange) {
                            range = document.body.createTextRange();
                            range.moveToElementText(text);
                            range.select();
                        } else if (window.getSelection) {
                            selection = window.getSelection();        
                            range = document.createRange();
                            range.selectNodeContents(text);
                            selection.removeAllRanges();
                            selection.addRange(range);

                        }
                         document.execCommand('Copy');
                    }
                    $(".copy").click(function(){

                         SelectContent( $(this).attr('title'));
                    });

答案 8 :(得分：4)

<div class="form-group">
    <label class="font-normal MyText">MyText to copy</label>&nbsp;
    <button type="button" class="btn btn-default btn-xs btnCopy" data="MyText">Copy</button>
</div>


$(".btnCopy").click(function () {
        var element = $(this).attr("data");
        copyToClipboard($('.' + element));
  });

function copyToClipboard(element) {
    var $temp = $("<input>");
    $("body").append($temp);
    $temp.val($(element).text()).select();
    document.execCommand("copy");
    $temp.remove();
}

答案 9 :(得分：4)

您可以通过单击按钮使用此代码在剪贴板中的页面中复制输入值

这是HTML 

<input type="text" value="xxx" id="link" class="span12" />
<button type="button" class="btn btn-info btn-sm" onclick="copyToClipboard('#link')">
    Copy Input Value
</button>

然后对于此html，我们必须使用此JQuery代码

function copyToClipboard(element) {
    $(element).select();
    document.execCommand("copy");
}

这是此问题的最简单解决方案

答案 10 :(得分：3)

您可以使用此库轻松实现复制目标！

https://clipboardjs.com/

  

将文本复制到剪贴板应该不难。它不应该要求   配置数十个步骤或加载数百个KB。但大多数人   所有，它不应该依赖于Flash或任何膨胀的框架。

     

这就是clipboard.js存在的原因。

或

https://github.com/zeroclipboard/zeroclipboard

http://zeroclipboard.org/

  

ZeroClipboard库提供了一种将文本复制到的简便方法   使用隐形Adobe Flash电影和JavaScript的剪贴板   接口

答案 11 :(得分：3)

jQuery简单解决方案。

应由用户点击触发。

$("<textarea/>").appendTo("body").val(text).select().each(function () {
            document.execCommand('copy');
        }).remove();

答案 12 :(得分：2)

要复制的文本是文本输入，例如：<input type="text" id="copyText" name="copyText">，并且在按钮上单击上面文本应该被复制到剪贴板，因此按钮就像：<button type="submit" id="copy_button" data-clipboard-target='copyText'>Copy</button>您的脚本应该像：

<script language="JavaScript">
$(document).ready(function() {
var clip = new ZeroClipboard($("#copy_button"), {
  moviePath: "ZeroClipboard.swf"
}); 
});

</script>

对于CDN文件

注意：ZeroClipboard.swf和ZeroClipboard.js＆＃34;文件应与您使用此功能的文件位于同一文件夹中，或者您必须包括我们在页面上包含<script src=""></script>的内容。

答案 13 :(得分：2)

从2020年开始，您应该使用Clipboard Api。

sudo apt-get install git libpcap-dev

这是有关interacting with the clipboard

的更多信息

答案 14 :(得分：2)

输入字段没有display: none是非常重要的。浏览器不会选择文本，因此不会被复制。使用opacity: 0（宽度为0px）可以解决此问题。

答案 15 :(得分：2)

大多数建议的答案会创建一个额外的临时隐藏输入元素。因为现在大多数浏览器都支持div内容编辑，所以我提出了一种解决方案，它不会创建隐藏元素，保留文本格式并使用纯JavaScript或jQuery库。

这是一个极简主义的骨架实现，使用了我能想到的最少的代码行：

//Pure javascript implementation:
document.getElementById("copyUsingPureJS").addEventListener("click", function() {
  copyUsingPureJS(document.getElementById("copyTarget"));
  alert("Text Copied to Clipboard Using Pure Javascript");
});

function copyUsingPureJS(element_id) {
  element_id.setAttribute("contentEditable", true);
  element_id.setAttribute("onfocus", "document.execCommand('selectAll',false,null)");
  element_id.focus();
  document.execCommand("copy");
  element_id.removeAttribute("contentEditable");
  
}

//Jquery:
$(document).ready(function() {
  $("#copyUsingJquery").click(function() {
    copyUsingJquery("#copyTarget");
  });
 

  function copyUsingJquery(element_id) {
    $(element_id).attr("contenteditable", true)
      .select()
      .on("focus", function() {
        document.execCommand('selectAll', false, null)
      })
      .focus()
    document.execCommand("Copy");
    $(element_id).removeAttr("contenteditable");
     alert("Text Copied to Clipboard Using jQuery");
  }
});
#copyTarget {
  width: 400px;
  height: 400px;
  border: 1px groove gray;
  color: navy;
  text-align: center;
  box-shadow: 0 4px 8px 0 gray;
}

#copyTarget h1 {
  color: blue;
}

#copyTarget h2 {
  color: red;
}

#copyTarget h3 {
  color: green;
}

#copyTarget h4 {
  color: cyan;
}

#copyTarget h5 {
  color: brown;
}

#copyTarget h6 {
  color: teal;
}

#pasteTarget {
  width: 400px;
  height: 400px;
  border: 1px inset skyblue;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="copyTarget">
  <h1>Heading 1</h1>
  <h2>Heading 2</h2>
  <h3>Heading 3</h3>
  <h4>Heading 4</h4>
  <h5>Heading 5</h5>
  <h6>Heading 6</h6>
  <strong>Preserve <em>formatting</em></strong>
  <br/>
</div>

<button id="copyUsingPureJS">Copy Using Pure JavaScript</button>
<button id="copyUsingJquery">Copy Using jQuery</button>
<br><br> Paste Here to See Result
<div id="pasteTarget" contenteditable="true"></div>

答案 16 :(得分：1)

Clipboard-polyfill库是基于现代Promise的异步剪贴板API的polyfill。

在CLI中安装

npm install clipboard-polyfill

作为剪贴板导入JS文件

window.clipboard = require('clipboard-polyfill');

example

我将其与require("babel-polyfill");捆绑使用，并在chrome 67上进行了测试。所有这些都对生产有益。

答案 17 :(得分：1)

两者都会像魅力一样：），

JAVASCRIPT：

function CopyToClipboard(containerid) {
if (document.selection) { 
    var range = document.body.createTextRange();
    range.moveToElementText(document.getElementById(containerid));
    range.select().createTextRange();
    document.execCommand("copy"); 

} else if (window.getSelection) {
    var range = document.createRange();
     range.selectNode(document.getElementById(containerid));
     window.getSelection().addRange(range);
     document.execCommand("copy");
     alert("text copied") 
}}

同样在html中，

<button id="button1" onclick="CopyToClipboard('div1')">Click to copy</button>

<div id="div1" >Text To Copy </div>

<textarea placeholder="Press ctrl+v to Paste the copied text" rows="5" cols="20"></textarea>

JQUERY： https://paulund.co.uk/jquery-copy-clipboard

答案 18 :(得分：1)

您可以复制HTML元素文本之外的单个文本。

        var copyToClipboard = function (text) {
            var $txt = $('<textarea />');

            $txt.val(text)
                .css({ width: "1px", height: "1px" })
                .appendTo('body');

            $txt.select();

            if (document.execCommand('copy')) {
                $txt.remove();
            }
        };

答案 19 :(得分：1)

这里的HTML代码

    <input id="result" style="width:300px"/>some example text
    <button onclick="copyToClipboard('result')">Copy P1</button>
    <input type="text" style="width:400px" placeholder="Paste here for test" />

JS CODE：

     function copyToClipboard(elementId) {

                      // Create a "hidden" input
                      var aux = document.createElement("input");

                      aux.setAttribute("value", document.getElementById(elementId).value);
                      // Append it to the body
                      document.body.appendChild(aux);
                      // Highlight its content
                      aux.select();
                      // Copy the highlighted text
                      document.execCommand("copy");
                      // Remove it from the body
                      document.body.removeChild(aux);
                    }

答案 20 :(得分：0)

纯JS，没有内联onclick，用于成对的类“内容-复制按钮”。如果您有很多元素，那会更舒服）

(function(){

/* Creating textarea only once, but not each time */
let area = document.createElement('textarea');
document.body.appendChild( area );
area.style.display = "none";

let content = document.querySelectorAll('.js-content');
let copy    = document.querySelectorAll('.js-copy');

for( let i = 0; i < copy.length; i++ ){
  copy[i].addEventListener('click', function(){
    area.style.display = "block";
    /* because the classes are paired, we can use the [i] index from the clicked button,
    to get the required text block */
    area.value = content[i].innerText;
    area.select();
    document.execCommand('copy');   
    area.style.display = "none";

    /* decorative part */
    this.innerHTML = 'Cop<span style="color: red;">ied</span>';
    /* arrow function doesn't modify 'this', here it's still the clicked button */
    setTimeout( () => this.innerHTML = "Copy", 2000 );
  });
}

})();
hr { margin: 15px 0; border: none; }
<span class="js-content">1111</span>
<button class="js-copy">Copy</button>
<hr>
<span class="js-content">2222</span>
<button class="js-copy">Copy</button>
<hr>
<span class="js-content">3333</span>
<button class="js-copy">Copy</button>

旧版浏览器支持：

(function(){

var area = document.createElement('textarea');
document.body.appendChild( area );
area.style.display = "none";

var content = document.querySelectorAll('.js-content');
var copy    = document.querySelectorAll('.js-copy');

for( var i = 0; i < copy.length; i++ ){
  copyOnClick(i);
}

function copyOnClick(i){
  copy[i].addEventListener('click', function(){
    area.style.display = "block";
    area.value = content[i].innerText;
    area.select();
    document.execCommand('copy');   
    area.style.display = "none";
    
    var t = this;
    t.innerHTML = 'Cop<span style="color: red;">ied</span>';
    setTimeout( function(){
      t.innerHTML = "Copy"
    }, 2000 );
  });
}

})();
hr { margin: 15px 0; border: none; }
<span class="js-content">1111</span>
<button class="js-copy">Copy</button>
<hr>
<span class="js-content">2222</span>
<button class="js-copy">Copy</button>
<hr>
<span class="js-content">3333</span>
<button class="js-copy">Copy</button>

答案 21 :(得分：0)

<p style="color:wheat;font-size:55px;text-align:center;">How to copy a TEXT to Clipboard on a Button-Click</p>
    
    <center>
    <p id="p1">Hello, I'm TEXT 1</p>
    <p id="p2">Hi, I'm the 2nd TEXT</p><br/>
    
    <button onclick="copyToClipboard('#p1')">Copy TEXT 1</button>
    <button onclick="copyToClipboard('#p2')">Copy TEXT 2</button>
      
    </center>

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js">
<script>
    function copyToClipboard(element) {
      var $temp = $("<input>");
      $("body").append($temp);
      $temp.val($(element).text()).select();
      document.execCommand("copy");
      $temp.remove();
    }
</script>

答案 22 :(得分：-2)

两者都会像魅力一样：），

  1. JAVASCRIPT：

    function CopyToClipboard(containerid) {
if (document.selection) { 
    var range = document.body.createTextRange();
    range.moveToElementText(document.getElementById(containerid));
    range.select().createTextRange();
    document.execCommand("copy"); 

} else if (window.getSelection) {
    var range = document.createRange();
     range.selectNode(document.getElementById(containerid));
     window.getSelection().addRange(range);
     document.execCommand("copy");
     alert("text copied") 
}}

    2. 同样在html中，

    <button id="button1" onclick="CopyToClipboard('div1')">Click to copy</button>

<div id="div1" >Text To Copy </div>

<textarea placeholder="Press ctrl+v to Paste the copied text" rows="5" cols="20"></textarea>
    1. JQUERY：

      2. https://paulund.co.uk/jquery-copy-clipboard

相关问题
最新问题