关于实现点击复制链接到剪切板的分享功能

最新推荐文章于 2023-07-13 15:56:15 发布

未出笼的菜包

最新推荐文章于 2023-07-13 15:56:15 发布

阅读量2k

点赞数

分类专栏： JS 文章标签： js javascript java html

本文链接：https://blog.youkuaiyun.com/JY20180407/article/details/106361118

版权

JS 专栏收录该内容

7 篇文章

订阅专栏

本文介绍了如何实现点击按钮后将本地链接复制到剪切板的功能。在遇到window方法不可用的问题后，作者通过创建虚拟标签并模拟剪切板操作来达到目的。文中提到，虽然input标签的readonly属性对复制有帮助，但实际测试中即使不使用该属性也能成功复制。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

目的：实现点击控件，剪切板自动复制本地链接到剪切板

1.碰到的问题

一开始以为简单的调用window方法就可以实现了

window.clipboardData.setData("Text",url);

结果（参考链接：js 剪切板的用法(clipboardData.setData)）

2. 另辟蹊径

发现通过复制标签上的数值再赋值给剪切板是允许的

<input type="text" size="30" id="url" value="https://www.jb51.net/">
<input type="button" value="复制链接1" onClick="copyUrl()">
<script type="text/javascript">
function copyUrl(){
 var url = document.getElementById("url").value;
 window.clipboardData.setData("Text",url);
 alert("复制链接成功！");
}
</script>

只能不得不选择别人写的js模拟实现这个功能（其实就是模拟一个类似隐含域的方法创建一个虚拟标签，然后赋值给虚拟标签，再获取标签的值再赋给剪切板，再清除掉这个虚拟标签）

<div class="item">
<a  class="ui share"><i class="share icon"></i> <span>分享</span></a>
</div>

$('.ui.share').click(function () {
        var detail = $(this).parents().find('input:last').val();
        var url = window.location.href.replace("pre/main","resourceDetails/")+detail;
        const el = document.createElement('textarea');
        el.value = url;
        el.setAttribute('readonly', '');
        document.body.appendChild(el);
        const selected =
            document.getSelection().rangeCount > 0
                ? document.getSelection().getRangeAt(0)
                : false;
        el.select();
        document.execCommand('copy');
        document.body.removeChild(el);
        if (selected) {
            document.getSelection().removeAllRanges();
            document.getSelection().addRange(selected);
        }
        alert("链接复制成功,可以分享链接给朋友们哎！！！");
    });