如何将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，它必须被粘贴。
当前回答
没有flash或任何其他要求的更好方法是clipboard.js。你所需要做的就是在任何按钮上添加data-clipboard-target="#toCopyElement"，初始化它new Clipboard('.btn');它会将id为toCopyElement的DOM内容复制到剪贴板。这是一个片段，通过链接复制您的问题中提供的文本。
虽然有一个限制是它不能在safari上运行，但它可以在所有其他浏览器上运行，包括移动浏览器，因为它不使用flash
$(函数(){ 新剪贴板(“.copy-text”); })； < script src = " https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js " > < /脚本> < script src = " https://cdn.jsdelivr.net/clipboard.js/1.5.12/clipboard.min.js " > < /脚本> <p id="content">Lorem Ipsum只是印刷排版行业的假文本。自16世纪以来，Lorem Ipsum一直是行业标准的虚拟文本 <a class="copy- Text " data-clipboard-target="#content" href="#">copy Text</a>
其他回答
<!DOCTYPE html>
<html>
<head>
<title></title>
<link href="css/index.css" rel="stylesheet" />
<script src="js/jquery-2.1.4.min.js"></script>
<script>
function copy()
{
try
{
$('#txt').select();
document.execCommand('copy');
}
catch(e)
{
alert(e);
}
}
</script>
</head>
<body>
<h4 align="center">Copy your code</h4>
<textarea id="txt" style="width:100%;height:300px;"></textarea>
<br /><br /><br />
<div align="center"><span class="btn-md" onclick="copy();">copy</span></div>
</body>
</html>
您可以使用此代码通过单击剪贴板中的按钮复制页中的输入值
这是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");
}
这是这个问题最简单的解
document.getElementById('markup-copy').addEventListener('click', function() {
var txt = "Your text Here";
$("<textarea/>").appendTo("body").val(txt).select().each(function () {
document.execCommand('copy');
}).remove();
});
下面是多个答案的组合。这将正确地保存换行符。
// Copies a value to the clipboard
window.copyToClipboard = function(value) {
// navigator clipboard api needs a secure context (https)
if (navigator.clipboard && window.isSecureContext) {
// navigator clipboard api method
return navigator.clipboard.writeText(value).then(function () {
//alert('It worked! Do a CTRL - V to paste')
}, function () {
alert('Error while copying to clipboard.')
});
} else {
// text area method
let textArea = document.createElement("textarea");
textArea.value = value;
// make the textarea out of viewport
textArea.style.position = "fixed";
textArea.style.left = "-999999px";
textArea.style.top = "-999999px";
document.body.appendChild(textArea);
textArea.focus();
textArea.select();
document.execCommand('copy');
textArea.remove();
}
}
这是一个优雅的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>
