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 ('Скопировано'); 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 ('Скопировано'); 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
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> Source: https://ru.stackoverflow.com/questions/555709/
All Articles