关于微信号以及QQ号点击复制功能

最新推荐文章于 2022-02-10 17:23:00 发布

bush jack

最新推荐文章于 2022-02-10 17:23:00 发布

阅读量1.5k

点赞数

分类专栏：前端文章标签： html js

本文链接：https://blog.csdn.net/qq_38251855/article/details/109569797

版权

前端专栏收录该内容

7 篇文章 0 订阅

订阅专栏

点击复制功能

这里介绍三种实现点击复制的方式.

1.第一种需要引入 clipboard.js，下载地址:https://github.com/zenorocha/clipboard.js。

<!DOCTYPE html>
<html>
<head>
	<title> 复制微信</title>

<script src="js/clipboard.js"  ></script>

<script>   
var stxlwx='tyerfg';
</script>
</head>
<body>
<!--
<button class="copy_btn" data-clipboard-action="copy" data-clipboard-target="#target" id="copy_btn">点击加好友</button>-->
<!--非按钮标签也可以-->

<div class="copy_btn" data-clipboard-action="copy" data-clipboard-target="#target" id="copy_btn">点击加好友</div>

<span style="display:none" id="target"><script>document.write(stxlwx);</script></span> <!--这种方式，这一句必须加-->

<script>

new ClipboardJS('.copy_btn', {
    text: function(trigger) {
        alert("复制成功!马上跳转微信搜索加微信");//跳转文字改动
      //  setTimeout("open_weixin();", 300);
       // return stxlwx;//   //复制的内容在此修改
       return 888; 

    }
   });

</script>

</body>
</html>

2 第二种同样需要引入 clipboard.js，这种方式更简单一些。

<!DOCTYPE html>
<html>
<head>
	<title> 复制微信</title>

<script src="js/clipboard.js"  ></script>
<script>   
var stxlwx='tyerfg';
</script>
</head>
<body>

<div class="copy_btn" >点击加好友2</div>
<script>
new ClipboardJS('.copy_btn', {
    text: function(trigger) {
        alert("复制成功!马上跳转微信搜索加微信");//跳转文字改动
      //  setTimeout("open_weixin();", 300);
       // return stxlwx;//  return stxlwx;  //复制的内容在此修改
       return 888; 

    }
   });

</script>

</body>
</html>

3 第三种方式，直接用原生js实现。

<!DOCTYPE html>
<html>
<head>
	<title> 复制微信</title>

<script src="js/clipboard.js"  ></script>

<script>   

var stxlwx='tyerfg';

</script>

</head>
<body>

<span style="display:none" id="content"><script>document.write(stxlwx);</script></span> 



<div id="copyBT" >点击加好友2</div>

<!--第二种方式结束-->
<script type="text/javascript">
    function copyArticle(event) {
        const range = document.createRange();
        range.selectNode(document.getElementById('content'));

        const selection = window.getSelection();
        if(selection.rangeCount > 0) selection.removeAllRanges();
        selection.addRange(range);
        document.execCommand('copy');
        alert("微信复制成功,打开微信添加");
    }

    document.getElementById('copyBT').addEventListener('click', copyArticle, false);
  document.getElementById('copyBT1').addEventListener('click', copyArticle, false);
  /*  document.getElementById('copyBT2').addEventListener('click', copyArticle, false);

document.getElementById('copyBT3').addEventListener('click', copyArticle, false);

 document.getElementById('copyBT4').addEventListener('click', copyArticle, false);

document.getElementById('copyBT5').addEventListener('click', copyArticle, false);
*/

</script>

</body>
</html>

bush jack

关注

0
点赞
踩
2

收藏

觉得还不错? 一键收藏
0
评论
关于微信号以及QQ号点击复制功能

点击复制功能这里介绍三种实现点击复制的方式.1.第一种需要引入 clipboard.js，下载地址:https://github.com/zenorocha/clipboard.js。<!DOCTYPE html><html><head> <title> 复制微信</title><script src="js/clipboard.js" ></script><script>
复制链接

扫一扫

专栏目录