我刚才正在做，我只是想知道有没有比我更好的方法，但是没有。

你可以使用我的代码，它复制文本并显示一个工具提示。

Head

<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.0.2/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-EVSTQN3/azprG1Anm3QDgpJLIm9Nao0Yz1ztcQTwFspd3yD65VohhpuuCOmLASjC" crossorigin="anonymous">
<link href="https://cdn.jsdelivr.net/npm/remixicon@2.2.0/fonts/remixicon.css" rel="stylesheet">
<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.0.2/dist/js/bootstrap.bundle.min.js" integrity="sha384-MrcW6ZMFYlzcLA8Nl+NtUVF0sA7MsXsP1UyJoMp4YLEuNSfAP+JcXn/tWtIaxVXM" crossorigin="anonymous"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.6.0/jquery.min.js" integrity="sha512-894YE6QWD5I59HgZOGReFYm4dnWc1Qt5NtvYSaNcOP+u1T9qYdvdihz0PPSiiqn/+/3e7Jo4EaG7TubfWGUrMQ==" crossorigin="anonymous" referrerpolicy="no-referrer"></script>

Body

<div class="alert alert-primary alert-dismissible mb-0 py-1" role="alert" id="liveAlert">
    <div class="container d-flex justify-content-between">
      <button type="button" class=" btn align-self-center ms-4 copytext" data-bs-toggle="tooltip" data-bs-placement="top" title=""><strong>Good news!</strong>  You just got 10% off, use your coupon <span class="fw-bold bg-secondary text-white px-2 maintext">store10off</span>. <i class="ri-file-copy-line"></i></button>
      <button type="button" class="btn align-self-center" data-bs-dismiss="alert" aria-label="Close"><strong class="fw-bold fs-4"><i class="ri-close-fill"></i></strong></button>
    </div>
    </div>

函数

<script>
    $('.copytext').click(function(){
        var thistooltip = $(this);
        var thistext = $(this).children('.maintext').text();
        navigator.clipboard.writeText(thistext);
        $(this).attr('title','copied');
        setTimeout(function(){$(thistooltip).tooltip("toggle");}, 800);
    });
</script>

更新2020:此解决方案使用execCommand。虽然这个功能在写这篇文章的时候还不错，但现在被认为已经过时了。它仍然可以在许多浏览器上工作，但不鼓励使用它，因为支持可能会被放弃。

还有另一种非flash的方式(除了jfriend00的回答中提到的剪贴板API)。您需要选择文本，然后执行复制命令，将当前页面上选择的任何文本复制到剪贴板。

例如，这个函数将把传递的元素的内容复制到剪贴板中(在PointZeroTwo的注释中更新了建议):

function copyToClipboard(element) {
    var $temp = $("<input>");
    $("body").append($temp);
    $temp.val($(element).text()).select();
    document.execCommand("copy");
    $temp.remove();
}

它是这样工作的:

创建一个临时隐藏的文本字段。 将元素的内容复制到该文本字段。 选择文本字段的内容。 执行命令拷贝，例如:document.execCommand("copy")。 删除临时文本字段。

注意元素的内部文本可以包含空格。因此，如果你想使用if作为密码，你可以在上面的代码中使用$(element).text().trim()来修剪文本。

你可以在这里看到一个快速的演示:

function copyToClipboard(element) { var $temp = $("<input>"); $("body").append($temp); $temp.val($(element).text()).select(); document.execCommand("copy"); $temp.remove(); } <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script> <p id="p1">P1: I am paragraph 1</p> <p id="p2">P2: I am a second paragraph</p> <button onclick="copyToClipboard('#p1')">Copy P1</button> <button onclick="copyToClipboard('#p2')">Copy P2</button> <br/><br/><input type="text" placeholder="Paste here for test" />

主要的问题是，目前并不是所有的浏览器都支持这个功能，但你可以在主要的浏览器上使用它:

Chrome 43 Internet Explorer 10 Firefox 41 Safari 10

更新1:这也可以实现一个纯JavaScript解决方案(没有jQuery):

function copyToClipboard(elementId) { // Create a "hidden" input var aux = document.createElement("input"); // Assign it the value of the specified element aux.setAttribute("value", document.getElementById(elementId).innerHTML); // Append it to the body document.body.appendChild(aux); // Highlight its content aux.select(); // Copy the highlighted text document.execCommand("copy"); // Remove it from the body document.body.removeChild(aux); } <p id="p1">P1: I am paragraph 1</p> <p id="p2">P2: I am a second paragraph</p> <button onclick="copyToClipboard('p1')">Copy P1</button> <button onclick="copyToClipboard('p2')">Copy P2</button> <br/><br/><input type="text" placeholder="Paste here for test" />

注意，我们传递的是没有# now的id。

正如madzohan在下面的评论中报告的那样，在某些情况下，64位版本的谷歌Chrome浏览器存在一些奇怪的问题(在本地运行文件)。使用上面的非jquery解决方案似乎可以解决这个问题。

Madzohan尝试在Safari中，解决方案工作，但使用document.execCommand('SelectAll')而不是使用.select()(在聊天和下面的评论中指定)。

正如PointZeroTwo在评论中指出的那样，可以对代码进行改进，使其返回成功/失败结果。您可以在这个jsFiddle上看到一个演示。

更新:副本保持文本格式

正如一个用户在StackOverflow的西班牙版本中指出的那样，如果你想字面上复制一个元素的内容，上面列出的解决方案非常有效，但是如果你想用格式粘贴复制的文本，它们就不那么有效了(因为它被复制到输入type="text"中，格式就“丢失了”)。

对此的解决方案是复制到一个内容可编辑的div中，然后以类似的方式使用execCommand复制它。这里有一个例子-点击复制按钮，然后粘贴到下面的内容编辑框:

function copy(element_id){ var aux = document.createElement("div"); aux.setAttribute("contentEditable", true); aux.innerHTML = document.getElementById(element_id).innerHTML; aux.setAttribute("onfocus", "document.execCommand('selectAll',false,null)"); document.body.appendChild(aux); aux.focus(); document.execCommand("copy"); document.body.removeChild(aux); } #target { width:400px; height:100px; border:1px solid #ccc; } <p id="demo"><b>Bold text</b> and <u>underlined text</u>.</p> <button onclick="copy('demo')">Copy Keeping Format</button> <div id="target" contentEditable="true"></div>

在jQuery中，它是这样的:

function copy(selector){ var $temp = $("<div>"); $("body").append($temp); $temp.attr("contenteditable", true) .html($(selector).html()).select() .on("focus", function() { document.execCommand('selectAll',false,null); }) .focus(); document.execCommand("copy"); $temp.remove(); } #target { width:400px; height:100px; border:1px solid #ccc; } <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script> <p id="demo"><b>Bold text</b> and <u>underlined text</u>.</p> <button onclick="copy('#demo')">Copy Keeping Format</button> <div id="target" contentEditable="true"></div>

编辑截止2016年

截至2016年，您现在可以在大多数浏览器中将文本复制到剪贴板，因为大多数浏览器都能够使用document.execCommand(“复制”)以编程方式将所选文本复制到剪贴板。

与浏览器中的其他一些操作(如打开一个新窗口)一样，复制到剪贴板只能通过特定的用户操作(如鼠标单击)来完成。例如，它不能通过计时器来完成。

下面是一个代码示例:

document.getElementById("copyButton").addEventListener("click", function() { copyToClipboard(document.getElementById("copyTarget")); }); function copyToClipboard(elem) { // create hidden text element, if it doesn't already exist var targetId = "_hiddenCopyText_"; var isInput = elem.tagName === "INPUT" || elem.tagName === "TEXTAREA"; var origSelectionStart, origSelectionEnd; if (isInput) { // can just use the original source element for the selection and copy target = elem; origSelectionStart = elem.selectionStart; origSelectionEnd = elem.selectionEnd; } else { // must use a temporary form element for the selection and copy target = document.getElementById(targetId); if (!target) { var target = document.createElement("textarea"); target.style.position = "absolute"; target.style.left = "-9999px"; target.style.top = "0"; target.id = targetId; document.body.appendChild(target); } target.textContent = elem.textContent; } // select the content var currentFocus = document.activeElement; target.focus(); target.setSelectionRange(0, target.value.length); // copy the selection var succeed; try { succeed = document.execCommand("copy"); } catch(e) { succeed = false; } // restore original focus if (currentFocus && typeof currentFocus.focus === "function") { currentFocus.focus(); } if (isInput) { // restore prior selection elem.setSelectionRange(origSelectionStart, origSelectionEnd); } else { // clear temporary content target.textContent = ""; } return succeed; } input { width: 400px; } <input type="text" id="copyTarget" value="Text to Copy"> <button id="copyButton">Copy</button><br><br> <input type="text" placeholder="Click here and press Ctrl-V to see clipboard contents">

这里有一个更高级的演示:https://jsfiddle.net/jfriend00/v9g1x0o6/

你也可以用clipboard.js获得一个预构建的库来做这个。

古老的，历史的答案

由于安全原因，任何现代浏览器都不允许通过JavaScript直接复制到剪贴板。最常见的解决方法是使用Flash功能复制到剪贴板，这只能由用户直接单击触发。

如前所述，ZeroClipboard是一组用于管理Flash对象以执行复制的流行代码。我用过。如果Flash安装在浏览设备上(排除了手机或平板电脑)，它就能正常工作。

下一个最常见的解决方法是将剪贴板绑定的文本放入一个输入字段，将焦点移到该字段，并建议用户按Ctrl + C复制文本。

关于这个问题的其他讨论和可能的解决方法可以在这些之前的Stack Overflow帖子中找到:

我如何复制到剪贴板在JavaScript? 如何使用jQuery将文本复制到客户端的剪贴板? 如何复制到剪贴板没有Flash?

这些问题询问了使用Flash的现代替代方案，得到了大量的赞，但没有答案(可能是因为根本不存在):

HTML5替代基于flash的ZeroClipboard安全复制数据到剪贴板? 复制到剪贴板没有Flash

Internet Explorer和Firefox曾经使用非标准api来访问剪贴板，但它们的最新版本已经弃用了这些方法(可能是出于安全原因)。

有一种新兴的标准试图提出一种“安全”的方法来解决最常见的剪贴板问题(可能需要特定的用户操作，就像Flash解决方案所要求的那样)，看起来它可能会在最新版本的Firefox和Chrome中部分实现，但我还没有证实这一点。

纯JS +更多的兼容性

function copyToClipboard(e) { selectText(e); document.execCommand("copy"); } function selectText(e) { e = document.getElementById(e); if (document.body.createTextRange) { const r = document.body.createTextRange(); r.moveToElementText(e); r.select(); } else if (window.getSelection) { const s = window.getSelection(); const r = document.createRange(); r.selectNodeContents(e); s.removeAllRanges(); s.addRange(r); } else { console.warn("Could not select text in "+e+": Unsupported browser."); } } <link href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.css" rel="stylesheet"/> <span style="border: 1px dotted gray;padding:10px 5px"> <strong style="font-size: 25px; margin-right: 10px" id="clipboard-text">С2Н5ОН</strong> <button onclick="copyToClipboard('clipboard-text')"><i class="fa fa-clipboard"></i></button> </span> <p><input placeholder="paste me here" value="" type="text"><p>

你为什么不直接用这个代码，我不明白?

navigator.clipboard.writeText('text here...');

没有flash或任何其他要求的更好方法是clipboard.js。你所需要做的就是在任何按钮上添加data-clipboard-target="#toCopyElement"，初始化它new Clipboard('.btn');它会将id为toCopyElement的DOM内容复制到剪贴板。这是一个片段，通过链接复制您的问题中提供的文本。

虽然有一个限制是它不能在safari上运行，但它可以在所有其他浏览器上运行，包括移动浏览器，因为它不使用flash

$(函数(){ 新剪贴板(“.copy-text”); })； < script src = " https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js " > < /脚本> < script src = " https://cdn.jsdelivr.net/clipboard.js/1.5.12/clipboard.min.js " > < /脚本> <p id="content">Lorem Ipsum只是印刷排版行业的假文本。自16世纪以来，Lorem Ipsum一直是行业标准的虚拟文本 <a class="copy- Text " data-clipboard-target="#content" href="#">copy Text</a>