使用HTML按钮将文本复制到剪贴板

如何解决使用HTML按钮将文本复制到剪贴板

我实际上如何使用JavaScript将一些固定文本复制到剪贴板？

这是我的代码，它不起作用，也许还有另一种方式，我不知道。

<button onclick="Copy()">Copy</button>
<script>
function Copy() {
document.execCommand("copy","Some text here");
}    
</script>

我想使用“仅”按钮复制一些固定的文本，因此我不必手动选择文本并复制它们。 谢谢。

解决方法

尝试：

var copy_text_val = document.querySelector('.copy_text');

function Copy() {
  copy_text_val.select();
  document.execCommand("copy");
  console.log(copy_text_val.value);
} 

<button onclick="Copy()">Copy</button>
<input type="text" class="copy_text" value="blablabla">

,

您可以尝试这种方法：

<script>
    function Copy() {
     var copyText = document.createElement("input");                  
     copyText.style="display:none";
     copyText.value  = "This is a paragraph";     
     document.body.appendChild(copyText); 
     copyText.select();
     copyText.setSelectionRange(0,99999); /*For mobile devices*/
     document.execCommand("copy");
     alert("Copied the text: " + copyText.value);
   }
</script>

,

对于此操作，您必须在实际复制文本之前动态选择文本： 这是一个示例：

function copy_text(node){
    if(document.body.createTextRange){
        const range = document.body.createTextRange();
        range.moveToElementText(node);
        range.select();
        document.execCommand('copy');
    }
    else if(window.getSelection){
        const selection = window.getSelection();
        const range = document.createRange();
        range.selectNodeContents(node);
        selection.removeAllRanges();
        selection.addRange(range);
        document.execCommand('copy');
    }
    else {
        console.warn("Could not select text in node");
    }
}
// This copy_text function ensures cross-browser compatibility
// What it does is select the text within the range of the node holding the text
// Then executes the "copy" command on that selected text

function clear_selection(){
    if(window.getSelection){
        window.getSelection().removeAllRanges();
    }
    else if(document.selection){
        document.selection.empty();
    }
}
// This clear_selection function clears any selection from the document

document.addEventListener("DOMContentLoaded",function(){
    document.getElementById("clipboard-exec").onclick = function(){
        copy_text(document.getElementById("clipboard-text"));
        // Copy the text on clicking the button
        setTimeout(() => { clear_selection() },500);
        // Clear the selection after 0.5s
    }
});

<span id="clipboard-text">This is the text that will be copied to your clipboard when you click on the "Copy" button.</span>
<button><span id="clipboard-exec"><i class="fa fa-copy"> Copy</i></span></button>

当然，有了此功能，您可以仅对其进行调整以适合您的需求。 另外请注意，出于安全目的，我想通过直接复制到键盘而没有有效地保存文本的有效文本节点来完成的操作将无法正常工作

但是您可以使用文本在文档中创建一个节点，但是将其隐藏起来，然后使用此功能将其选中。.注意您要复制到剪贴板的文本必须实际上在文档，以便您在其上执行“复制”命令