Javascript将文本复制到剪贴板，而无需单击页面加载上的任何按钮 [英] Javascript copy text to clipboard without click any button on page load
问题描述
我一直试图将我的 P标签的内容复制到剪贴板上，而无需单击任何按钮.
I've been trying to copy the Content of a my P tag to my clipboard without any button click.
我尝试完全按一下按钮即可工作.这是onClick的工作代码.
I tried it work on perfectly button click.Here is my working code for onClick.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
</head>
<body>
<p id="p1">Copied..</p>
<button onclick="copyToClipboard('#p1')" id="ashvin">Copy</button>
</body>
</html>
<script>
function copyToClipboard(element) {
console.log('+++++++++++++++++++++++++++++++');
var $temp = $("<input>");
$("body").append($temp);
$temp.val($(element).text()).select();
var status = document.execCommand("copy");
if(status){
console.log("=======done")
}else{
console.log("=======error")
}
$temp.remove();
}
</script>
按一下按钮就可以了，但是我想在页面加载时复制而不是单击.
It's working on button click fine, but i want to copy on page load not a click.
任何帮助将不胜感激.谢谢！
Any help would be greatly appreciated. Thanks!
推荐答案
许多document.execCommand方法(如复制)都需要用户交互(如单击)，因为它被认为具有访问剪贴板的安全风险(是系统级的，而不是浏览器级的)，并使用诸如所要求的自动方法.您可能需要重新考虑通过在页面加载时进行复制来实现的目标.
Many document.execCommand methods (like copy) require a user interaction (like a click) because it is considered a security risk to get access to the clipboard (which is system level, not browser level) with automagic methods like what is being asked for. You might need to re-think what you are trying to achieve by copying on page load.
上面的用例是什么，也许有人可以帮助您解决您的情况?
What is the use-case for the above, and perhaps someone can help with your scenario?
[edit]这是一个链接，该链接显示了您在Codepen上的脚本.当您运行"页面时，它应该显示未工作"输出，当您单击按钮时，它应该会显示已工作"输出
[edit] Here's a link that shows your script on codepen. When you "run" the page it should give the "didn't work" output, when you click the button it should give the "worked" output
<!DOCTYPE html>
<html lang="en">
<head>
<script
src="https://code.jquery.com/jquery-3.3.1.min.js"
integrity="sha256-FgpCb/KJQlLNfOu91ta32o/NMZxltwRo8QtmkMRdAu8="
crossorigin="anonymous"></script>
<script>
function copyToClipboard(element) {
var $temp = $("<input>");
$("body").append($temp);
$temp.val($(element).text()).select();
var status = document.execCommand("copy");
if(status){
$("#output").text("worked")
}else{
$("#output").text("didn't work")
}
$temp.remove();
}
</script>
</head>
<body onload="copyToClipboard('#p1')">
<p id="p1">Text to copy on page load, but won't work</p>
<button onclick="copyToClipboard('#p1')">Copy the text</button>
<p id="output"></p>
</body>
</html>如果这是针对本地项目的(即不在公共领域中)，则可能可以在chrome中设置标志来覆盖安全风险，但是我不知道它们是什么或它们是否存在，但可能值得一看.
If this is for a local project (i.e. won't be in the public domain) there are perhaps flags you can set in chrome to override the security risk, but I don't know what they are or if they exist, but might be worth a look.
[更新后的编辑] ，我对某些事情感到非常困惑.感觉像是完全破解，但是它对我有用(在glitch.com上)，所以我可能会得到纠正.我使用了本机的navigator.clipboard.writeText方法，但是当我并排尝试这两种方法(在chrome中)以测试这两种方法均无效时，它还是无效， did 为导航员"工作.原来，如果我在promise执行之前将document.execCommand放在某个地方，那么它似乎可以工作.但是它在codepen或内联脚本引擎中不起作用(可能与iframe等有关).有人可以检查我的理智吗?
[updated edit] I am very confused by something. This feels like a total hack, but it is working for me (on glitch.com), so I might stand corrected. I used the native navigator.clipboard.writeText method, and it didn't work either BUT when I was trying both methods side-by-side (in chrome) to test that both wouldn't work, it did work for the "navigator" one. Turns out if I put document.execCommand somewhere before the promise is executed then it seems to work. BUT it doesn't work on codepen or here in the inline scripting engine (might be to do with iframes etc?). Could someone check my sanity please?
<!DOCTYPE html>
<html lang="en">
<head>
<script>
function copyToClipboard(element) {
document.execCommand("copy");
var text = document.querySelector(element).textContent;
var output = document.getElementById("output");
navigator.clipboard.writeText(text).then(function() {
output.textContent = "worked";
}, function() {
output.textContent = "didn't work";
});
}
</script>
</head>
<body onload="copyToClipboard('#p1')">
<p id="p1">Text to copy on page load.</p>
<button onclick="copyToClipboard('#p1')">
Click to copy text
</button>
<p id="output"></p>
</body>
</html>这篇关于Javascript将文本复制到剪贴板，而无需单击页面加载上的任何按钮的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
