Question

我想使剪贴板js与我的node.js ejs文件之一一起使用，由于实际文件太大，因此我创建了此文件，我想在其中使用剪贴板js将文本区域的内容复制到剪贴板。

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

我无法使其工作，问题出在哪里？

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

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

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

2 个答案: