单击按钮复制到剪贴板

如何将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，它必须被粘贴。

当前回答

这是一个优雅的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>

2022-11-11 12:51:46

其他回答

编辑截止2016年

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

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

下面是一个代码示例:

这里有一个更高级的演示: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中部分实现，但我还没有证实这一点。

2014-03-22 17:56:12

这是一个优雅的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>

2022-11-11 12:51:46

大多数建议的答案都会创建一个额外的临时隐藏输入元素。因为现在大多数浏览器都支持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>

2018-04-03 15:52:05

这是复制内容的最简单方法

 <div id="content"> Lorepm ispum </div>
 <button class="copy" title="content">Copy Sorce</button>

function SelectContent(element) {
                        var doc = document
                            , text = doc.getElementById(element)
                            , range, selection
                        ;    
                        if (doc.body.createTextRange) {
                            range = document.body.createTextRange();
                            range.moveToElementText(text);
                            range.select();
                        } else if (window.getSelection) {
                            selection = window.getSelection();        
                            range = document.createRange();
                            range.selectNodeContents(text);
                            selection.removeAllRanges();
                            selection.addRange(range);

                        }
                         document.execCommand('Copy');
                    }
                    $(".copy").click(function(){

                         SelectContent( $(this).attr('title'));
                    });

2016-01-13 09:36:17

<p style="color:wheat;font-size:55px;text-align:center;">How to copy a TEXT to Clipboard on a Button-Click</p>
    
    <center>
    <p id="p1">Hello, I'm TEXT 1</p>
    <p id="p2">Hi, I'm the 2nd TEXT</p><br/>
    
    <button onclick="copyToClipboard('#p1')">Copy TEXT 1</button>
    <button onclick="copyToClipboard('#p2')">Copy TEXT 2</button>
      
    </center>

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js">
<script>
    function copyToClipboard(element) {
      var $temp = $("<input>");
      $("body").append($temp);
      $temp.val($(element).text()).select();
      document.execCommand("copy");
      $temp.remove();
    }
</script>

2021-05-26 11:08:20

单击按钮复制到剪贴板

推荐文章

最新文章

标签