3

Есть div ни как не могу понять как скопировать его текст в буфер? Пробовал так, но ничего не получилось

var copyContent = $('#preview_content').html();
document.execCommand('copy');
alert ('Скопировано');
5
  • @АлексейШиманский, это я не тот код кинул, сейчас исправлю. А копировать знаю как то так document.execCommand('copy'); Commented 15 авг. 2016 в 18:51
  • Но нужно как то текст выделить тот что у меня в var copyContent Commented 15 авг. 2016 в 18:52
  • Тут есть более короткий и красивый способ stackoverflow.com/a/30905277/3774518 Commented 15 авг. 2016 в 19:20
  • Возможный дубликат вопроса: Jquery и копирование в буфер обмена Commented 16 авг. 2016 в 8:47
  • Код от Nsk единственный нормально заработал на кривом проекте под управлением битрикс Commented 28 сент. 2020 в 15:57

3 ответа 3

8

Набросал, все работает на отлично, Пример №1:

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;
}
input {
  width: 400px;
}
<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">

Пример №2:

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

Полезная ссылка: Нажми меня

7
  • Не работает у меня. Я на JQuery все делаю, а у Вас по идеи просто JS. Или я ошибаюсь? Commented 15 авг. 2016 в 19:08
  • А нет, работает Commented 15 авг. 2016 в 19:09
  • @Анатолий Если помог, поддержи)
    – user192664
    Commented 15 авг. 2016 в 19:10
  • Только вот работает не с JQuery, я просто на JQuery выципляю блок к определенным id Commented 15 авг. 2016 в 19:11
  • Все работает, разобрался. Спасибо. Commented 15 авг. 2016 в 19:13
3

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>

<div id="text">Как скопировать текст из div в буфер обмена?</div>
<br>
<button id="copy">Копировать текст</button>

<script>
	$('#copy').click(function() {
	    var $temp = $("<input>");
	    $("body").append($temp);
	    $temp.val($('#text').text()).select();
	    document.execCommand("copy");
	    $temp.remove();

	    $(this).text('Тест скопирован!');
	});
</script>

2
  • О, вот этот костыльный метод работает отлично!
    – Crantisz
    Commented 17 февр. 2019 в 17:35
  • Код от Nsk вполне рабочий. Проверил в разных браузерах на десктопе и в хроме на мобиле Commented 25 мая 2020 в 22:26
1

Второй вариант хорош. В начале еще лучше выполнить:

try {
    // современный объект Selection
    window.getSelection().removeAllRanges();
  } catch (e) {
    // для IE8-
    document.selection.empty();
  }

Всё ещё ищете ответ? Посмотрите другие вопросы с метками или задайте свой вопрос.