如何将div内的文本复制到剪贴板?我有一个div，需要添加一个链接，将文本添加到剪贴板。有解决办法吗?
<p class="content">Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s</p>
<a class="copy-text">copy Text</a>
在我点击复制文本，然后我按Ctrl + V，它必须被粘贴。
当前回答
非常简单。你必须搜索js navigator.clipboard.writeText("thistext"); 这将简单地复制文本“thistext”。现在让它工作点击，使用jquery onclick函数和存储值(你想复制的文本)在一个字符串(如果你需要，那么你可以使用DOM以及从页面获取一个值)，并使用这一行复制，而不是“thistext”，传递变量!
其他回答
document.getElementById('markup-copy').addEventListener('click', function() {
var txt = "Your text Here";
$("<textarea/>").appendTo("body").val(txt).select().each(function () {
document.execCommand('copy');
}).remove();
});
两者都会有魅力:)，
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>
JQUERY: https://paulund.co.uk/jquery-copy-clipboard
换行(阿尔瓦罗·蒙托罗回答的延伸)
var ClipboardHelper = {
copyElement: function ($element)
{
this.copyText($element.text())
},
copyText:function(text) // Linebreaks with \n
{
var $tempInput = $("<textarea>");
$("body").append($tempInput);
$tempInput.val(text).select();
document.execCommand("copy");
$tempInput.remove();
}
};
ClipboardHelper.copyText('Hello\nWorld');
ClipboardHelper.copyElement($('body h1').first());
HTML:
// you need bootstrap(js && css) and JQuery(js)
<span class="text-copy" value="your-text">text</span>
CSS:
.text-copy {
cursor: pointer;
color: #0d6efd;
text-decoration: underline;
}
.text-copy:hover {
color: #1b6be4;
}
JS(使用JQuery):
$(document).ready(function() {
var elements = $('.copy-text');
for(let i = 0; i < elements.length; i++) {
const element = $(elements[i]);
element.attr('data-toggle', 'tooltip')
.attr('data-placement', 'top')
.attr('title', `Tab to copy "${element.attr('value')}"`);
}
$('[data-toggle="tooltip"]').tooltip();
$('.text-copy').click(function() {
var $temp = $("<input>");
$("body").append($temp);
$temp.val($(this).attr('value')).select();
document.execCommand("copy");
$temp.remove();
});
});
$(document).ready(async function() { var elements = $('.text-copy'); for(let i = 0; i<elements.length; i++) { const element = $(elements[i]); element.attr('data-toggle', 'tooltip') .attr('data-placement', 'top') .attr('title', `Tab to copy "${element.attr('value')}"`); } $('[data-toggle="tooltip"]').tooltip(); $('.text-copy').click(function() { var $temp = $("<input>"); $("body").append($temp); $temp.val($(this).attr('value')).select(); document.execCommand("copy"); $temp.remove(); }); }); body { display: grid; justify-content: center; } .text-copy { cursor: pointer; color: #0d6efd; text-decoration: underline; } .text-copy:hover { color: #1b6be4; } <html> <head> <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap@4.5.3/dist/css/bootstrap.min.css"> <script src="https://code.jquery.com/jquery-3.5.1.slim.min.js"></script> <script src="https://cdn.jsdelivr.net/npm/bootstrap@4.5.3/dist/js/bootstrap.bundle.min.js"></script> </head> <body> <h2 class="text-copy" value="your copy text">your text</h2> <br> <h4>paste here</h4> <input type="text"> </body> </html>
js是一个很好的实用工具，它允许在不使用Flash的情况下将文本或HTML数据复制到剪贴板。它很容易使用;只需要包含.js并使用如下代码:
<button id='markup-copy'>Copy Button</button>
<script>
document.getElementById('markup-copy').addEventListener('click', function() {
clipboard.copy({
'text/plain': 'Markup text. Paste me into a rich text editor.',
'text/html': '<i>here</i> is some <b>rich text</b>'
}).then(
function(){console.log('success'); },
function(err){console.log('failure', err);
});
});
</script>
clipboard.js也在GitHub上。
2016年1月15日编辑:今天编辑了顶部的答案，引用了我在2015年8月发布的答案中的相同API。前面的文本指示用户使用ZeroClipboard。只是想澄清一下，我并没有从jfriend00的答案中抽取这个，而是相反。
