There is a div or how can I not understand how to copy its text to the clipboard? Tried it like this, but it didn't work out.

var copyContent = $('#preview_content').html(); document.execCommand('copy'); alert ('Скопировано'); 
  • @ Alexey Shimansky, I threw the wrong code, I'll fix it now. And I know to copy something like this document.execCommand ('copy'); - Anatoly
  • But it is necessary as a text to select the one that I have in var copyContent - Anatoly
  • There is a shorter and more beautiful way to stackoverflow.com/a/30905277/3774518 - Andrii Kulyk
  • Possible duplicate question: Jquery and copying to the clipboard - Ivan Pshenitsyn

3 answers 3

Sketched, everything works fine, Example number 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"> 

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

Useful link: Click me

  • It does not work for me. I do everything on jQuery, and your idea is just JS. Or I'm wrong? - Anatoly
  • And no, it works - Anatoly
  • @ Anatoly If helped, support) - user192664
  • Only here it does not work with JQuery, I just jQuery to block a block to specific id - Anatoly
  • Everything works, figured out. Thank. - Anatoly

The second option is good. At the beginning it is even better to do:

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

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

    • Oh, this crutch method works fine! - Crantisz