Javascript 如何使用单击按钮在剪贴板中复制示例代码

编辑开始*****

这不是重复，我的问题与你提到的有点不同。这是我的更新代码，我看到我在执行console.log时得到了innerHTML，但它没有复制，如果您可以在jsFiddler中使用它，这可能吗

html代码：

 <div id="mydivid">
     $(document).on('click', '.btn', function() { $(this).toggleClass('active'); });
 </div>

编辑结束*****

我正在尝试使用JavaScript从代码标记复制代码。它可以工作，但它会将文本复制到一长行文本中。我希望它以准确的格式复制，例如，请参见以下网站：

我的问题是，如何实现与上述网站相同的

copy

code逻辑

这是我的密码：

copy: function(component,event,text) {
        // Create an hidden input
        var hiddenInput = document.createElement("input");
        // passed text into the input
        hiddenInput.setAttribute("value", text);
        // Append the hiddenInput input to the body
        document.body.appendChild(hiddenInput);
        // select the content
        hiddenInput.select();
        // Execute the copy command
        document.execCommand("copy");
        // Remove the input from the body after copy text
        document.body.removeChild(hiddenInput);
    }

---

问题是，

输入

中不能有任何换行符，因此当您将字符串分配给其

值

时，该字符串包含换行符，它们就会消失：

input.value='foo\nbar'；
console.log（input.value.includes（'\n'））
问题在于，
输入
中不能包含任何换行符，因此当您将字符串分配给其
.value
，并且该字符串包含换行符时，这些换行符就会消失：


input.value='foo\nbar'；
console.log（input.value.includes（'\n'））
我替换为
文本区域
，但没有复制到剪贴板这里工作正常-请参阅回答中的live snippet我看到了它复制的代码，但为什么我仍然看到
标记？请尝试此代码，而不是将
foo bar
示例代码复制到剪贴板
var str=“Hello，World！”
 log（“你好，这里！”） $（document）.on（'click'，'.btn'，function（）{$（this.toggleClass（'active'）；}）
 
是输入字符串的一部分，因此它也将是复制文本的一部分。如果不希望它成为复制文本的一部分，请先将其修剪掉？或者，如果要删除所有HTML标记，请使用
DOMParser
，将元素的
innerHTML
设置为该文本，然后检索其
textContent
或
innerText
？我被
textarea
替换，但没有复制到剪贴板这里工作正常-请参阅回答中的live snippet我看到了它复制的代码，但为什么我仍然看到
标记？请尝试此代码，而不是将
foo bar
示例代码复制到剪贴板
var str=“Hello，World！”
 log（“你好，这里！”） $（document）.on（'click'，'.btn'，function（）{$（this.toggleClass（'active'）；}）
 
是输入字符串的一部分，因此它也将是复制文本的一部分。如果不希望它成为复制文本的一部分，请先将其修剪掉？或者，如果要删除所有HTML标记，请使用
DOMParser
，将元素的
innerHTML
设置为该文本，然后检索其
textContent
或
innerText
？问题不接受答案，请耐心等待。使用
textarea
元素作为中间文本复制元素插入
输入
，以保留重复和此处所述的行喙。使用问题中提到的
元素的
textContent
属性，而不是
innerHTML
获取要复制的文本。将
code
标记嵌套在
pre
标记中也可能有助于它在HTML中的布局。问题不在于接受答案，所以请耐心等待。使用
textarea
元素作为中间文本复制元素插入
输入
，以保留重复和此处所述的行喙。使用问题中提到的
元素的
textContent
属性，而不是
innerHTML
获取要复制的文本。将
code
标记嵌套在
pre
标记中也有助于它在HTML中的布局。
copy: function(component,event,text) {
        // Create an hidden input
        var hiddenInput = document.createElement("input");
        // passed text into the input
        hiddenInput.setAttribute("value", text);
        // Append the hiddenInput input to the body
        document.body.appendChild(hiddenInput);
        // select the content
        hiddenInput.select();
        // Execute the copy command
        document.execCommand("copy");
        // Remove the input from the body after copy text
        document.body.removeChild(hiddenInput);
    }