如何将div内的文本复制到剪贴板?我有一个div,需要添加一个链接,将文本添加到剪贴板。有解决办法吗?

<p class="content">Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s</p>

<a class="copy-text">copy Text</a>

在我点击复制文本,然后我按Ctrl + V,它必须被粘贴。


当前回答

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的答案中抽取这个,而是相反。

其他回答

文本复制是在文本输入,如:< input type="text" id="copyText" name="copyText">和,在按钮点击上面的文本应该被复制到剪贴板,所以按钮是像:<button type="submit" id="copy_button" data-clipboard-target='copyText'>复制</button>你的脚本应该像:

<script language="JavaScript">
$(document).ready(function() {
var clip = new ZeroClipboard($("#copy_button"), {
  moviePath: "ZeroClipboard.swf"
}); 
});

</script>

CDN文件

(zeroclipboard.swf): (zeroclipboard.js):

注意:ZeroClipboard.swf和ZeroClipboard.js”文件应该和你使用这个功能的文件在同一个文件夹中,或者你必须包括像我们包括<script src=""></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的答案中抽取这个,而是相反。

纯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>

剪贴板-填充库是现代基于promise的异步剪贴板API的填充库。

在CLI下安装:

npm install clipboard-polyfill 

导入为JS文件中的剪贴板

window.clipboard = require('clipboard-polyfill');

例子

我在一个bundle中使用require("babel-polyfill");并在chrome 67上进行了测试。所有这些都有利于生产。