2020 年更新:此解决方案使用 execCommand。虽然在撰写此答案时该功能很好,it is now considered obsolete。它仍然适用于许多浏览器,但不鼓励使用它,因为可能会放弃支持。
还有另一种非Flash方式(除了jfriend00's answer中提到的Clipboard API)。您需要选择文本,然后execute the command copy 将页面上当前选择的任何文本复制到剪贴板。
例如,此函数会将传递的元素的内容复制到剪贴板(使用来自PointZeroTwo 的 cmets 中的建议进行更新):
function copyToClipboard(element) {
var $temp = $("<input>");
$("body").append($temp);
$temp.val($(element).text()).select();
document.execCommand("copy");
$temp.remove();
}
这就是它的工作原理:
- 创建一个临时隐藏的文本字段。
- 将元素的内容复制到该文本字段。
- 选择文本字段的内容。
- 执行命令复制,如:
document.execCommand("copy")。
- 删除临时文本字段。
注意元素的内部文本可以包含空格。因此,如果您想使用 if 作为密码,您可以在上面的代码中使用 $(element).text().trim() 来修剪文本。
您可以在此处查看快速演示:
function copyToClipboard(element) {
var $temp = $("<input>");
$("body").append($temp);
$temp.val($(element).text()).select();
document.execCommand("copy");
$temp.remove();
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<p id="p1">P1: I am paragraph 1</p>
<p id="p2">P2: I am a second paragraph</p>
<button onclick="copyToClipboard('#p1')">Copy P1</button>
<button onclick="copyToClipboard('#p2')">Copy P2</button>
<br/><br/><input type="text" placeholder="Paste here for test" />
主要问题是目前并非所有browsers support 都有此功能,但您可以在以下主要功能上使用它:
- 铬 43
- Internet Explorer 10
- 火狐41
- Safari 10
更新 1:这也可以通过纯 JavaScript 解决方案(无 jQuery)来实现:
function copyToClipboard(elementId) {
// Create a "hidden" input
var aux = document.createElement("input");
// Assign it the value of the specified element
aux.setAttribute("value", document.getElementById(elementId).innerHTML);
// Append it to the body
document.body.appendChild(aux);
// Highlight its content
aux.select();
// Copy the highlighted text
document.execCommand("copy");
// Remove it from the body
document.body.removeChild(aux);
}
<p id="p1">P1: I am paragraph 1</p>
<p id="p2">P2: I am a second paragraph</p>
<button onclick="copyToClipboard('p1')">Copy P1</button>
<button onclick="copyToClipboard('p2')">Copy P2</button>
<br/><br/><input type="text" placeholder="Paste here for test" />
请注意,我们现在传递的 id 不带 #。
正如madzohan 在下面的 cmets 中报告的那样,在某些情况下(在本地运行文件),64 位版本的 Google Chrome 存在一些奇怪的问题。上面的非 jQuery 解决方案似乎解决了这个问题。
Madzohan 在 Safari 中尝试过,并且解决方案有效,但使用 document.execCommand('SelectAll') 而不是使用 .select()(在聊天和下面的 cmets 中指定)。
作为PointZeroTwo points out in the comments,可以改进代码,使其返回成功/失败结果。您可以在this jsFiddle 上查看演示。
更新:复制保持文本格式
作为user pointed out in the Spanish version of StackOverflow,如果您想从字面上复制元素的内容,上面列出的解决方案非常有效,但如果您想粘贴带有格式的复制文本(因为它被复制转换成input type="text",格式为“丢失”)。
解决方案是复制到可编辑的内容div,然后以类似的方式使用execCommand 复制它。这里有一个例子——点击复制按钮,然后粘贴到下面的内容可编辑框中:
function copy(element_id){
var aux = document.createElement("div");
aux.setAttribute("contentEditable", true);
aux.innerHTML = document.getElementById(element_id).innerHTML;
aux.setAttribute("onfocus", "document.execCommand('selectAll',false,null)");
document.body.appendChild(aux);
aux.focus();
document.execCommand("copy");
document.body.removeChild(aux);
}
#target {
width:400px;
height:100px;
border:1px solid #ccc;
}
<p id="demo"><b>Bold text</b> and <u>underlined text</u>.</p>
<button onclick="copy('demo')">Copy Keeping Format</button>
<div id="target" contentEditable="true"></div>
在 jQuery 中,它会是这样的:
function copy(selector){
var $temp = $("<div>");
$("body").append($temp);
$temp.attr("contenteditable", true)
.html($(selector).html()).select()
.on("focus", function() { document.execCommand('selectAll',false,null); })
.focus();
document.execCommand("copy");
$temp.remove();
}
#target {
width:400px;
height:100px;
border:1px solid #ccc;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<p id="demo"><b>Bold text</b> and <u>underlined text</u>.</p>
<button onclick="copy('#demo')">Copy Keeping Format</button>
<div id="target" contentEditable="true"></div>