JavaScript复制剪贴板
[英]Javascript Copy Clipboard
问题描述
I need to copy text to the users clipboard. 
我需要将文本复制到用户剪贴板。 But for some reason this simple snippet is not working (prints false) 但是由于某种原因，这个简单的代码片段无法正常工作（打印错误）
<html>
<head>
</head>
<body>
<textarea id="clip">Test</textarea>
<script>
var ta = document.getElementById('clip');
ta.focus();
ta.select();
setTimeout(function() {
console.log(document.execCommand('copy'));
}, 1000);
</script>
</body>
</html>
Is there something I am doing wrong? 我做错什么了吗？ Any Ideas? 有任何想法吗？
4 个解决方案
解决方案1
1
document.execCommand('copy') must be called as a direct result of user action. 作为用户操作的直接结果，必须调用document.execCommand('copy') 。
For example: click event handler. 例如：单击事件处理程序。
Google dev post: https://developers.google.com/web/updates/2015/04/cut-and-copy-commands?hl=en Google开发人员职位： https : //developers.google.com/web/updates/2015/04/cut-and-copy-commands?hl=zh-CN
Update: It looks like a duplicate. 更新：它看起来像一个重复。 I advise you to checkout the following response on the similar topic: https://stackoverflow.com/a/30810322/4754887 我建议您检查有关类似主题的以下响应： https : //stackoverflow.com/a/30810322/4754887
解决方案2
0 2016-12-28 10:08:44
Yes you are right. 是的，你是对的。 This is working 这工作
<!DOCTYPE html>
<html>
<head>
</head>
<body>
<textarea id="clip" style="position: absolute; left: 100px; top: -100px;">Test</textarea>
<button id="copyButton">Copy To Clipboard</button>
<script>
document.getElementById('copyButton').addEventListener('click', function() {
var ta = document.getElementById('clip');
ta.innerHTML = "Test2";
ta.focus();
ta.select();
console.log(document.execCommand('copy'));
});
</script>
</body>
</html>
解决方案3
0 2016-12-28 10:12:03
..or simpler: ..或更简单：
<html>
<head>
</head>
<body>
<textarea id="clip" onclick="copyToClp()">Test</textarea><!-- this executes copyToClp() function on user's click -->
<script>
var ta = document.getElementById('clip');
ta.focus();
ta.select();
function copyToClp(){
console.log(document.execCommand('copy'));
}
</script>
</body>
</html>
解决方案4
0 2016-12-28 10:15:39
Actually, you should use Document.execCommand() (as you did) AND the (so cool) JavaScript Selection API . 实际上，您应该使用Document.execCommand（） （如您所做的那样）和（非常酷的）JavaScript Selection API 。
Selection API allows you to programatically make a text selection from any HTML element on the page, and it works exactly like pressing CTRL+C on your keyboard. Selection API允许您以编程方式从页面上的任何HTML元素进行文本选择，其工作原理与按键盘上的CTRL + C完全相同。 Usefull to quickly grab URLs, long texts, SSH keys, in one click. 一次单击即可快速获取URL，长文本，SSH密钥。
You can try something like this : 您可以尝试这样的事情：
var button = document.getElementById("yourButtonId");
var content = document.getElementById("yourContentElement");
button.addEventListener("click", function() {
// Define range and selection.
var range = document.createRange();
var selection = window.getSelection();
// Clear selection from any previous data.
selection.removeAllRanges();
range.selectNodeContents(content);
selection.addRange(range);
// Copy to clipboard.
document.execCommand('copy');
}, false);
Edit : One of the advantages of this method is that you can manipulate content in the clipboard after it's been copied (escaping code, formatting numbers or dates, uppercase, lowercase, changing HTML tags, etc). 编辑：此方法的优点之一是您可以在剪贴板中的内容被复制后进行操作（转义代码，格式化数字或日期，大写，小写，更改HTML标记等）。
声明:本站的技术帖子网页，遵循CC BY-SA 4.0协议，如果您需要转载，请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.