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

这是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");
}

这是这个问题最简单的解

两者都会有魅力:)，

JAVASCRIPT:

function CopyToClipboard(containerid) {
if (document.selection) { 
    var range = document.body.createTextRange();
    range.moveToElementText(document.getElementById(containerid));
    range.select().createTextRange();
    document.execCommand("copy"); 

} else if (window.getSelection) {
    var range = document.createRange();
     range.selectNode(document.getElementById(containerid));
     window.getSelection().addRange(range);
     document.execCommand("copy");
     alert("text copied") 
}}

在html中，

<button id="button1" onclick="CopyToClipboard('div1')">Click to copy</button>

<div id="div1" >Text To Copy </div>

<textarea placeholder="Press ctrl+v to Paste the copied text" rows="5" cols="20"></textarea>

JQUERY: https://paulund.co.uk/jquery-copy-clipboard

更新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>

这是一个优雅的Javascript解决方案

<input type="text" value="Foo Bar" id="your_input">
<button onclick="copy()">Copy text</button>

<script type="application/javascript">
function copy() {
  var copiedtext = document.getElementById("your_input");
  copiedtext.select();
  copiedtext.setSelectionRange(0, 99999); //for mobile devices
  navigator.clipboard.writeText(copiedtext.value);
  alert("You just copied " + copiedtext.value);
}
</script>

jQuery简单解决方案。

应由用户点击触发。

$("<textarea/>").appendTo("body").val(text).select().each(function () {
            document.execCommand('copy');
        }).remove();

js是一个很好的实用工具，它允许在不使用Flash的情况下将文本或HTML数据复制到剪贴板。它很容易使用;只需要包含.js并使用如下代码:

<button id='markup-copy'>Copy Button</button>

<script>
    document.getElementById('markup-copy').addEventListener('click', function() {
        clipboard.copy({
            'text/plain': 'Markup text. Paste me into a rich text editor.',
            'text/html': '<i>here</i> is some <b>rich text</b>'
        }).then(
            function(){console.log('success'); },
            function(err){console.log('failure', err);
        });
    });
</script>

clipboard.js也在GitHub上。

2016年1月15日编辑:今天编辑了顶部的答案，引用了我在2015年8月发布的答案中的相同API。前面的文本指示用户使用ZeroClipboard。只是想澄清一下，我并没有从jfriend00的答案中抽取这个，而是相反。