<div class="form-group">
    <label class="font-normal MyText">MyText to copy</label>&nbsp;
    <button type="button" class="btn btn-default btn-xs btnCopy" data="MyText">Copy</button>
</div>


$(".btnCopy").click(function () {
        var element = $(this).attr("data");
        copyToClipboard($('.' + element));
  });

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

大多数建议的答案都会创建一个额外的临时隐藏输入元素。因为现在大多数浏览器都支持div内容编辑，所以我提出了一个解决方案，它不创建隐藏元素，保留文本格式，并使用纯JavaScript或jQuery库。

下面是一个使用我能想到的最少代码行的极简框架实现:

//Pure javascript implementation: document.getElementById("copyUsingPureJS").addEventListener("click", function() { copyUsingPureJS(document.getElementById("copyTarget")); alert("Text Copied to Clipboard Using Pure Javascript"); }); function copyUsingPureJS(element_id) { element_id.setAttribute("contentEditable", true); element_id.setAttribute("onfocus", "document.execCommand('selectAll',false,null)"); element_id.focus(); document.execCommand("copy"); element_id.removeAttribute("contentEditable"); } //Jquery: $(document).ready(function() { $("#copyUsingJquery").click(function() { copyUsingJquery("#copyTarget"); }); function copyUsingJquery(element_id) { $(element_id).attr("contenteditable", true) .select() .on("focus", function() { document.execCommand('selectAll', false, null) }) .focus() document.execCommand("Copy"); $(element_id).removeAttr("contenteditable"); alert("Text Copied to Clipboard Using jQuery"); } }); #copyTarget { width: 400px; height: 400px; border: 1px groove gray; color: navy; text-align: center; box-shadow: 0 4px 8px 0 gray; } #copyTarget h1 { color: blue; } #copyTarget h2 { color: red; } #copyTarget h3 { color: green; } #copyTarget h4 { color: cyan; } #copyTarget h5 { color: brown; } #copyTarget h6 { color: teal; } #pasteTarget { width: 400px; height: 400px; border: 1px inset skyblue; } <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> <div id="copyTarget"> <h1>Heading 1</h1> <h2>Heading 2</h2> <h3>Heading 3</h3> <h4>Heading 4</h4> <h5>Heading 5</h5> <h6>Heading 6</h6> <strong>Preserve <em>formatting</em></strong> <br/> </div> <button id="copyUsingPureJS">Copy Using Pure JavaScript</button> <button id="copyUsingJquery">Copy Using jQuery</button> <br><br> Paste Here to See Result <div id="pasteTarget" contenteditable="true"></div>

纯JS，没有内联onclick，配对类“内容-复制按钮”。如果你有很多元素，会更舒服)

(function(){ /* Creating textarea only once, but not each time */ let area = document.createElement('textarea'); document.body.appendChild( area ); area.style.display = "none"; let content = document.querySelectorAll('.js-content'); let copy = document.querySelectorAll('.js-copy'); for( let i = 0; i < copy.length; i++ ){ copy[i].addEventListener('click', function(){ area.style.display = "block"; /* because the classes are paired, we can use the [i] index from the clicked button, to get the required text block */ area.value = content[i].innerText; area.select(); document.execCommand('copy'); area.style.display = "none"; /* decorative part */ this.innerHTML = 'Cop<span style="color: red;">ied</span>'; /* arrow function doesn't modify 'this', here it's still the clicked button */ setTimeout( () => this.innerHTML = "Copy", 2000 ); }); } })(); hr { margin: 15px 0; border: none; } <span class="js-content">1111</span> <button class="js-copy">Copy</button> <hr> <span class="js-content">2222</span> <button class="js-copy">Copy</button> <hr> <span class="js-content">3333</span> <button class="js-copy">Copy</button>

旧的浏览器支持:

(function(){ var area = document.createElement('textarea'); document.body.appendChild( area ); area.style.display = "none"; var content = document.querySelectorAll('.js-content'); var copy = document.querySelectorAll('.js-copy'); for( var i = 0; i < copy.length; i++ ){ copyOnClick(i); } function copyOnClick(i){ copy[i].addEventListener('click', function(){ area.style.display = "block"; area.value = content[i].innerText; area.select(); document.execCommand('copy'); area.style.display = "none"; var t = this; t.innerHTML = 'Cop<span style="color: red;">ied</span>'; setTimeout( function(){ t.innerHTML = "Copy" }, 2000 ); }); } })(); hr { margin: 15px 0; border: none; } <span class="js-content">1111</span> <button class="js-copy">Copy</button> <hr> <span class="js-content">2222</span> <button class="js-copy">Copy</button> <hr> <span class="js-content">3333</span> <button class="js-copy">Copy</button>

您可以使用此代码通过单击剪贴板中的按钮复制页中的输入值

这是Html

<input type="text" value="xxx" id="link" class="span12" />
<button type="button" class="btn btn-info btn-sm" onclick="copyToClipboard('#link')">
    Copy Input Value
</button>

然后对于这个html，我们必须使用这个JQuery代码

function copyToClipboard(element) {
    $(element).select();
    document.execCommand("copy");
}

这是这个问题最简单的解

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

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

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>

编辑截止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中部分实现，但我还没有证实这一点。