无法使剪贴板 js 与 textarea 一起使用答案

【问题标题】：cannot make clipboard js to work with textarea无法使剪贴板 js 与 textarea 一起使用
【发布时间】：2019-01-04 04:31:28
【问题描述】：

我想让剪贴板 js 与我的 node.js ejs 文件之一一起工作，因为实际文件太大，我创建了这个文件，我想在其中使用剪贴板 js 将 textarea 的内容复制到剪贴板.

<!DOCTYPE html>
<html>
<head>
<link rel="stylesheet" type="text/css" href="https://stackpath.bootstrapcdn.com/bootstrap/4.2.1/css/bootstrap.min.css">
<title>pilcit</title>
<script src="https://cdn.jsdelivr.net/clipboard.js/1.5.3/clipboard.min.js"></script>

<script>
var clipboard = new Clipboard('.copyButton');
clipboard.on('success', function(e) {
    alert(e);
});
clipboard.on('error', function(e) {
    alert(e);
});
</script>

</head>
<body>
         <textarea id="copy" class="form-control mt-5" name="content" rows="4">
              content of text area that is to be copied 
         </textarea>

        <button class="copyButton" id="copyButtonId" data-clipboard-action="copy" data-clipboard-target="copy">Copy!</button>       
</body>
</html>

我不能让它工作，问题出在哪里？

【问题讨论】：

标签： javascript node.js dom clipboard.js

【解决方案1】：

你错过了这个

data-clipboard-action="copy" data-clipboard-target="#copy"

这里的copy 应该是#copy，因为您是通过 id 选择它

var clipboard = new Clipboard('.copyButton');
clipboard.on('success', function(e) {
    alert(e);
});
clipboard.on('error', function(e) {
    alert(e);
});

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="https://cdn.jsdelivr.net/clipboard.js/1.5.3/clipboard.min.js"></script>


         <textarea id="copy" class="form-control mt-5" name="content" rows="4">
              content of text area that is to be copied 
         </textarea>

        <button class="copyButton" id="copyButtonId" data-clipboard-action="copy" data-clipboard-target="#copy">Copy!</button>

【讨论】：

当我用这段代码创建一个 HTML 文件并在我的浏览器上运行它不起作用？
@Adarsh 你一定做错了什么，第一次检查你的页面的剪贴板权限第二次检查控制台错误

【解决方案2】：

您可以使用 jQuery 来实现这一点，execCommand() 方法为可编辑部分的选定部分执行指定的命令。

jQuery

$("button").click(function(){
    $("textarea").select();
    document.execCommand('copy');
});

JavaScript

document.querySelector("button").onclick = function(){
  document.querySelector("textarea").select();
  document.execCommand('copy');
};

<textarea>Copy my this ya</textarea>
<br>
<button>Select</button>

【讨论】：

我试过了，但是不行，这是我现在的代码你可以复制我呀！