Как скопировать текст из div в буфер обмена

Вот мой код, когда пользователь нажимает на эту кнопку:

<button id="button1">Click to copy</button>

Как мне скопировать текст внутри этого div?

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

ОТВЕТЫ

Ответ 1

Оба будут работать как шарм :),

  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>

Вот фрагмент.

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

Ответ 2

Я попробовал решение, предложенное выше. Но это не было достаточно кросс-браузерным. Мне действительно нужно было 11, чтобы работать. После попытки я добрался до:

    <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, т.е. 11 (11.472.17134.0), edge (EdgeHTML 17.17134)

Обновление 27 марта 2019 года.

По какой-то причине document.createRange() раньше не работал с ie11. Но теперь правильно возвращает объект Range. Так что лучше использовать это, чем document.getSelection().getRangeAt(0).

Ответ 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");
    }
}

Ответ 4

Добавление ссылки в качестве ответа, чтобы привлечь больше внимания к комментарию Аарона Лавера ниже первого ответа.

Это работает как шарм - http://clipboardjs.com. Просто добавьте файл clipboard.js или min. При запуске используйте класс, для которого нужно щелкнуть html-компонент, и просто передать идентификатор компонента с копируемым содержимым, щелчком элемента.

Ответ 5

Это решение добавляет отмену выделения текста после копирования в буфер обмена:

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

Ответ 6

Я получаю selectNode() параметр 1 не имеет типа узла ошибка.

изменил код на это и работает. (для хрома)

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>