Question

我一直试图将我的 P标签的内容复制到剪贴板上，而无需单击任何按钮。

我尝试过完全按一下按钮即可工作。这是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>

按一下按钮就可以了，但是我想在页面加载时复制而不是单击。

任何帮助将不胜感激。谢谢！

Answer 1

许多document.execCommand方法（例如复制）都需要用户交互（例如单击），因为使用自动魔术方法（例如，什么是剪贴板）来访问剪贴板（系统级别，而不是浏览器级别）被认为存在安全风险。被要求。您可能需要重新考虑通过在页面加载时进行复制来实现的目标。

上面的用例是什么，也许有人可以帮助您解决您的情况？

[edit]这是一个link，显示了在Codepen上的脚本。当您“运行”页面时，它应该显示“未工作”输出，当您单击按钮时，它应该显示“已工作”输出

<!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中设置一些标志来覆盖安全风险，但是我不知道它们是什么或它们是否存在，但可能值得一看。

[更新后的编辑] ，我对某些事情感到非常困惑。感觉像是完全破解，但是它对我有用（在glitch.com上），所以我可能会得到纠正。我使用了本机的navigator.clipboard.writeText方法，但是当我并排尝试这两种方法（在chrome中）测试这两种方法均无效时，它既不起作用，它 did 为“导航员”工作。原来，如果我在执行承诺之前将document.execCommand放在某个地方，那么它似乎可以工作。但是它在codepen或内联脚本引擎中不起作用（可能与iframe等有关）。有人可以检查我的理智吗？

在这篇文章中不能直接使用（对我来说）
在codepen中（对我来说）无效
在glitch上为我工作（对我来说）

<!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>

Answer 2

这将不起作用，因为复制命令必须由用户的操作触发。看到这篇文章：https://w3c.github.io/editing/execCommand.html#dfn-the-copy-command

我想这个问题是重复的：Cannot use `document.execCommand('copy');` from developer console

Answer 3

在document.body.onload()上编写函数或添加事件监听器。 document.body.addEventListener("load", copyToClipboard); 或者只是

    <body onload=copyToClipboard('#p1')>
     ..
    </body>

Javascript将文本复制到剪贴板，而无需单击页面加载上的任何按钮

3 个答案: