如何将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，它必须被粘贴。
当前回答
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>
其他回答
剪贴板-填充库是现代基于promise的异步剪贴板API的填充库。
在CLI下安装:
npm install clipboard-polyfill
导入为JS文件中的剪贴板
window.clipboard = require('clipboard-polyfill');
例子
我在一个bundle中使用require("babel-polyfill");并在chrome 67上进行了测试。所有这些都有利于生产。
大多数建议的答案都会创建一个额外的临时隐藏输入元素。因为现在大多数浏览器都支持div内容编辑，所以我提出了一个解决方案，它不创建隐藏元素，保留文本格式，并使用纯JavaScript或jQuery库。
下面是一个使用我能想到的最少代码行的极简框架实现:
//Pure javascript implementation: document.getElementById("copyUsingPureJS").addEventListener("click", function() { copyUsingPureJS(document.getElementById("copyTarget")); alert("Text Copied to Clipboard Using Pure Javascript"); }); function copyUsingPureJS(element_id) { element_id.setAttribute("contentEditable", true); element_id.setAttribute("onfocus", "document.execCommand('selectAll',false,null)"); element_id.focus(); document.execCommand("copy"); element_id.removeAttribute("contentEditable"); } //Jquery: $(document).ready(function() { $("#copyUsingJquery").click(function() { copyUsingJquery("#copyTarget"); }); function copyUsingJquery(element_id) { $(element_id).attr("contenteditable", true) .select() .on("focus", function() { document.execCommand('selectAll', false, null) }) .focus() document.execCommand("Copy"); $(element_id).removeAttr("contenteditable"); alert("Text Copied to Clipboard Using jQuery"); } }); #copyTarget { width: 400px; height: 400px; border: 1px groove gray; color: navy; text-align: center; box-shadow: 0 4px 8px 0 gray; } #copyTarget h1 { color: blue; } #copyTarget h2 { color: red; } #copyTarget h3 { color: green; } #copyTarget h4 { color: cyan; } #copyTarget h5 { color: brown; } #copyTarget h6 { color: teal; } #pasteTarget { width: 400px; height: 400px; border: 1px inset skyblue; } <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> <div id="copyTarget"> <h1>Heading 1</h1> <h2>Heading 2</h2> <h3>Heading 3</h3> <h4>Heading 4</h4> <h5>Heading 5</h5> <h6>Heading 6</h6> <strong>Preserve <em>formatting</em></strong> <br/> </div> <button id="copyUsingPureJS">Copy Using Pure JavaScript</button> <button id="copyUsingJquery">Copy Using jQuery</button> <br><br> Paste Here to See Result <div id="pasteTarget" contenteditable="true"></div>
非常简单。你必须搜索js navigator.clipboard.writeText("thistext"); 这将简单地复制文本“thistext”。现在让它工作点击，使用jquery onclick函数和存储值(你想复制的文本)在一个字符串(如果你需要，那么你可以使用DOM以及从页面获取一个值)，并使用这一行复制，而不是“thistext”，传递变量!
这是一个优雅的Javascript解决方案
<input type="text" value="Foo Bar" id="your_input">
<button onclick="copy()">Copy text</button>
<script type="application/javascript">
function copy() {
var copiedtext = document.getElementById("your_input");
copiedtext.select();
copiedtext.setSelectionRange(0, 99999); //for mobile devices
navigator.clipboard.writeText(copiedtext.value);
alert("You just copied " + copiedtext.value);
}
</script>
您可以使用此代码通过单击剪贴板中的按钮复制页中的输入值
这是Html
<input type="text" value="xxx" id="link" class="span12" />
<button type="button" class="btn btn-info btn-sm" onclick="copyToClipboard('#link')">
Copy Input Value
</button>
然后对于这个html，我们必须使用这个JQuery代码
function copyToClipboard(element) {
$(element).select();
document.execCommand("copy");
}
这是这个问题最简单的解
