如何将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，它必须被粘贴。
当前回答
输入字段没有display: none，这一点非常重要。浏览器不会选择文本，因此不会被复制。使用不透明度:0，宽度为0px来解决这个问题。
其他回答
这是复制内容的最简单方法
<div id="content"> Lorepm ispum </div>
<button class="copy" title="content">Copy Sorce</button>
function SelectContent(element) {
var doc = document
, text = doc.getElementById(element)
, range, selection
;
if (doc.body.createTextRange) {
range = document.body.createTextRange();
range.moveToElementText(text);
range.select();
} else if (window.getSelection) {
selection = window.getSelection();
range = document.createRange();
range.selectNodeContents(text);
selection.removeAllRanges();
selection.addRange(range);
}
document.execCommand('Copy');
}
$(".copy").click(function(){
SelectContent( $(this).attr('title'));
});
纯JS，没有内联onclick，配对类“内容-复制按钮”。如果你有很多元素，会更舒服)
(function(){ /* Creating textarea only once, but not each time */ let area = document.createElement('textarea'); document.body.appendChild( area ); area.style.display = "none"; let content = document.querySelectorAll('.js-content'); let copy = document.querySelectorAll('.js-copy'); for( let i = 0; i < copy.length; i++ ){ copy[i].addEventListener('click', function(){ area.style.display = "block"; /* because the classes are paired, we can use the [i] index from the clicked button, to get the required text block */ area.value = content[i].innerText; area.select(); document.execCommand('copy'); area.style.display = "none"; /* decorative part */ this.innerHTML = 'Cop<span style="color: red;">ied</span>'; /* arrow function doesn't modify 'this', here it's still the clicked button */ setTimeout( () => this.innerHTML = "Copy", 2000 ); }); } })(); hr { margin: 15px 0; border: none; } <span class="js-content">1111</span> <button class="js-copy">Copy</button> <hr> <span class="js-content">2222</span> <button class="js-copy">Copy</button> <hr> <span class="js-content">3333</span> <button class="js-copy">Copy</button>
旧的浏览器支持:
(function(){ var area = document.createElement('textarea'); document.body.appendChild( area ); area.style.display = "none"; var content = document.querySelectorAll('.js-content'); var copy = document.querySelectorAll('.js-copy'); for( var i = 0; i < copy.length; i++ ){ copyOnClick(i); } function copyOnClick(i){ copy[i].addEventListener('click', function(){ area.style.display = "block"; area.value = content[i].innerText; area.select(); document.execCommand('copy'); area.style.display = "none"; var t = this; t.innerHTML = 'Cop<span style="color: red;">ied</span>'; setTimeout( function(){ t.innerHTML = "Copy" }, 2000 ); }); } })(); hr { margin: 15px 0; border: none; } <span class="js-content">1111</span> <button class="js-copy">Copy</button> <hr> <span class="js-content">2222</span> <button class="js-copy">Copy</button> <hr> <span class="js-content">3333</span> <button class="js-copy">Copy</button>
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>
使用这个函数:
function copy_input($input) {
$input.focus();
$input.select();
try {
var successful = document.execCommand('copy');
} catch(err) {
console.error('Unable to copy');
}
}
电话:
$(".copy-text").on("click",() => {
copy_input("#input_Id")
})
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的答案中抽取这个，而是相反。
