复制内容到剪贴板

Posted 2023-03-29

参考技术A 有时需要实现将内容复制到剪贴板的功能，该方法实现了安卓与ios的兼容

function copy(data)

              var weixin = data;

              var tmpInput  = document.createElement('input');

              tempInput.value = weixin;

              document.body.appendChild(tempInput );

              if(navigator.userAgent.match(/(iPhone|iPod|iPad);?/i))

                window.getSelection().removeAllRanges();

                var range = document.createRange();

                range.selectNode(tempInput);//选中需要复制的节点

                window.getSelection().addRange(range);

                var successful = document.execCommand('copy');

                window.getSelection().removeAllRanges();

              else

                tempInput.select(); // 选择对象

                document.execCommand("Copy"); // 执行浏览器复制命令

                tempInput.className = 'tempInput ';

                tempInput.style.display='none';

                document.body.removeChild(tempInput );//移除

                layui.use('layer',function()

                  const layer = layui.layer;

                  layer.msg('复制成功')

                )

             

)

如何使用 jquery 将内容复制到剪贴板

【中文标题】如何使用 jquery 将内容复制到剪贴板

【英文标题】：How to copy the content to clipboard using jquery

【发布时间】：2014-03-03 05:25:05

【问题描述】：

我有链接，当我单击链接时，我必须将内容复制到剪贴板。 我正在使用下面的代码，但它没有复制。任何其他代码都可以复制到剪贴板。我测试了很多代码，但没有一个有用。

<script src="jquery.js"></script>
<script src="jquery.clipboard.js"></script>
<script>
$(document).ready(function() 
    $("#val_link").click(function () 
    alert("Hello!");
        $("#val_link").clipboard(
            path: 'jquery.clipboard.swf',
            copy: function() 
                alert("Text copied.");
                return $("div#some-content").text();
                
        ); 
    );
);
</script>
<a href="javascript:void(0);" id="val_link" value="ttttt">Link</a>
<div id="some-content">Text content to copy</div>

【参考方案1】：

你可以这样做：

http://www.shirmanov.com/2010/09/copy-to-clipboard-in-htmljavascript-and.html

【参考方案2】：

.clipboard() 函数会为您附加点击处理程序。但它会将它附加到一个不可见的元素上，在你的情况下，它放在#val_link 的顶部。

因此，您必须在 #val_link 上放置一个点击处理程序以防止其默认使用。

然后在其中添加剪贴板功能。

基本上你所做的是点击绑定剪贴板处理程序 - 我猜如果你再次点击链接，那么它会正确复制，然后绑定另一组事件。

尝试：

<script src="jquery.js"></script>
<script src="jquery.clipboard.js"></script>
<script>
$(document).ready(function() 
    $("#val_link").click(function (o) 
    o.preventDefault();
    );
     $("#val_link").clipboard(
            path: 'jquery.clipboard.swf',
            copy: function() 
                alert("Text copied.");
                return $("div#some-content").text();
                
        );

);
</script>
<a href="javascript:void(0);" id="val_link" value="ttttt">Link</a>
<div id="some-content">Text content to copy</div>