Question

以下是用户点击此按钮时的代码：

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

如何复制此div中的文本？

// Translations object:
var translations = {
  'en': {
    'home': 'Home',
    'back': 'Back'
    /* ... */
  },
  'lt': {
    'home': 'Pradžia',
    'back': 'Atgal'
    /* ... */
  }
};


// wait for all DOM elements to load
$(document).ready(function() {

  // when button is clicked
  $('.lang-btn').click(function() {
    // take translations subset
    var lang = translations[$(this).data('lang')];

    // for each element that has "data-key" attribute
    $('[data-key]').each(function() {

      // change it's content to other language
      $(this).text(lang[$(this).data('key')]);
    })
  });
});

Answer 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>

以下是摘录。

＆＃13;

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, copy in the text-area")
  }
}

＆＃13;

<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>

＆＃13;

Answer 2

我尝试了上面提出的解决方案。但它不够跨浏览器。我真的需要ie11才能工作。在尝试之后我得到了：

    <html>
        <body>
            <div id="a" onclick="copyDivToClipboard()"> Click to copy </div>
            <script>
                function copyDivToClipboard() {
                    var range = document.createRange();
                    range.selectNode(document.getElementById("a"));
                    window.getSelection().removeAllRanges(); // clear current selection
                    window.getSelection().addRange(range); // to select text
                    document.execCommand("copy");
                    window.getSelection().removeAllRanges();// to deselect
                }
            </script>
        </body>
    </html>

使用firefox 64，Chrome 71，Opera 57，ie11（11.472.17134.0），edge（EdgeHTML 17.17134）进行测试

2019年3月27日更新。

出于某些原因，document.createRange()之前没有使用ie11。但现在正确返回Range对象。所以最好使用它，而不是document.getSelection().getRangeAt(0)。

Answer 3

当您要复制多个项目，并且每个项目都有一个单独的“复制到剪贴板”按钮时，可接受的答案不起作用。单击一个按钮后，其他按钮将不起作用。

为使它们起作用，我在接受的答案功能中添加了一些代码以清除文本选择，然后再进行新的选择：

function CopyToClipboard(containerid) {
    if (window.getSelection) {
        if (window.getSelection().empty) { // Chrome
            window.getSelection().empty();
        } else if (window.getSelection().removeAllRanges) { // Firefox
            window.getSelection().removeAllRanges();
        }
    } else if (document.selection) { // IE?
        document.selection.empty();
    }

    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");
    }
}

Answer 4

添加链接作为答案，以便在第一个答案下方引起更多关注Aaron Lavers的评论。

这就像一个魅力 - http://clipboardjs.com。只需添加clipboard.js或min文件即可。在启动时，使用具有要点击的html组件的类，并将具有要复制的内容的组件的id传递给click元素。

Answer 5

<div id='myInputF2'> YES ITS DIV TEXT TO COPY  </div>

<script>

    function myFunctionF2()  {
        str = document.getElementById('myInputF2').innerHTML;
        const el = document.createElement('textarea');
        el.value = str;
        document.body.appendChild(el);
        el.select();
        document.execCommand('copy');
        document.body.removeChild(el);
        alert('Copied the text:' + el.value);
    };
</script>

更多信息：https://hackernoon.com/copying-text-to-clipboard-with-javascript-df4d4988697f

Answer 6

此解决方案将复制后的文本取消选择添加到剪贴板：

function copyDivToClipboard(elem) {
    var range = document.createRange();
    range.selectNode(document.getElementById(elem));
    window.getSelection().removeAllRanges();
    window.getSelection().addRange(range);
    document.execCommand("copy");
    window.getSelection().removeAllRanges();
}

Answer 7

上述解决方案不适用于内容可编辑的 div。将其内容复制到剪贴板还需要几个步骤。

这里是如何将 div contenteditable 复制到剪贴板。在 iphone 和 Android 上选择文本并不总是那么容易。一键复制，即可复制所有内容。

<div id="editor1" contenteditable="true"></div> 

<button id="button1" onclick="CopyToClipboard()">COPY</button>

<script>

function CopyToClipboard() {

    var copyBoxElement = document.getElementById('editor1');
    copyBoxElement.contenteditable = true;
    copyBoxElement.focus();
    document.execCommand('selectAll');
    document.execCommand("copy");
    copyBoxElement.contenteditable = false;
    alert("Text has been copied")
}

</script>

Answer 8

我得到的selectNode（）参数1不是节点错误类型。

将代码更改为此及其工作。（适用于Chrome）

function copy_data(containerid) {
  var range = document.createRange();
  range.selectNode(containerid); //changed here
  window.getSelection().removeAllRanges(); 
  window.getSelection().addRange(range); 
  document.execCommand("copy");
  window.getSelection().removeAllRanges();
  alert("data copied");
}

<div id="select_txt">This will be copied to clipboard!</div>
<button type="button" onclick="copy_data(select_txt)">copy</button>
<br>
<hr>
<p>Try paste it here after copying</p>
<textarea></textarea>

Answer 9

所有这些都不为我工作。但是我发现了一个重复的问题，答案已经为我解决了。

这里是link

How do I copy to the clipboard in JavaScript?

Answer 10

对解决方案进行了修改，因此它将基于类而不是特定的ID与多个div一起使用。例如，如果您有多个代码块。假定div类设置为“代码”。

<script>
        $( document ).ready(function() {
            $(".code").click(function(event){
                var range = document.createRange();
                range.selectNode(this);
                window.getSelection().removeAllRanges(); // clear current selection
                window.getSelection().addRange(range); // to select text
                document.execCommand("copy");
                window.getSelection().removeAllRanges();// to deselect
            });
        });
    </script>

Answer 11

创建要附加到文档的元素。将其值设置为我们要复制到剪贴板的字符串。将该元素追加到当前HTML文档中。使用HTMLInputElement.select（）选择元素的内容。使用Document.execCommand（'copy'）将的内容复制到剪贴板。从文档中删除元素

function copyToClipboard(containertext) {
    var el = document.createElement('textarea');
    el.value = containertext;
    el.text = containertext;
    el.setAttribute('id', 'copyText');
    el.setAttribute('readonly', '');
    el.style.position = 'absolute';
    el.style.left = '-9999px';
    document.body.appendChild(el);
    var coptTextArea = document.getElementById('copyText');
    $('#copyText').text(containertext);
    coptTextArea.select();
    document.execCommand('copy');
    document.body.removeChild(el);
    /* Alert the copied text */
    alert("Copied : "+containertext, 1000);
}

如何将文本从div复制到剪贴板

11 个答案: