JS点击复制值到剪贴板(点击复制微信号)代码

在移动端可以说,js点击复制文本是非常见的,我经常接触到很多人用js点击复制值到剪贴板ios或微信这个功能。下面先给大家看下我做出来的效果,如下图:

JS点击复制微信号代码

 

以前通过网站直接产生对话就是用QQ和一些网页对话软件,如53KF,商务通。随着微信越来越多人使用,通过网站产生微信对话这种需要变得越来越强烈,特别是手机端。

 

其实,微信在网页端是不能直接产生对话的,都只能在网站上通过复制微信号,然后,直接弹出调用微信,添加好友的方式,来实现整个用户体验的过程。

 

下面是我重新封装的代码,只能点击复制。如果要在手机端直接点击复制后,微信马上调用弹出来,例如:实现JS点击复制微信号并代码自动打开微信加好友功能。

可以在代码:

alert("微信号 : 15202070000 复制成功",1500);

后加上:

window.location.href=’weixin://’;

 

JS点击复制微信号代码示例:

以下有背景颜色的都是必须引入的,或者说是重点中的重点。

 

index.html

<!DOCTYPE html>
<html>
<head>
<title>
Wordpress 点击复制微信号代码</title>
<meta charset="utf-8" />
<meta name="viewport" content="width=device-width,initial-scale=1.0,user-scalable=no" />
<link rel="shortcut icon" href="http://www.yzipi.com/wp-content/themes/yzipi/images/favicon.ico" />
<link rel='stylesheet' id='index-css'  href='http://www.yzipi.com/wp-content/themes/yzipi/style.css' type='text/css' media='all' />
<link rel='stylesheet' id='index-css'  href='css/index.css' type='text/css' media='all' />
<script type='text/javascript' src='https://cdnjs.cloudflare.com/ajax/libs/jquery/3.5.1/jquery.min.js'></script>
<script type='text/javascript' src='https://cdnjs.cloudflare.com/ajax/libs/clipboard.js/1.6.1/clipboard.min.js'></script>
</head>
<body>
 <a href="http://www.yzipi.com/" class="logos" title="Wordpress主题" rel="home"><img src="https://www.yzipi.com/wp-content/themes/yzipi/images/logo.png" alt="柚子皮Logo"></a>

<div class="juzhong">

<div class="weixinde">微信 :  <span id="target">15202070000</span> <button class="btn" data-clipboard-action="copy" data-clipboard-target="#target" id="copy_btn">
添加
</button>
<script>    
    $(document).ready(function(){       
        var clipboard = new Clipboard('#copy_btn');    
        clipboard.on('success', function(e) {    
            alert("微信号 : 15202070000 复制成功",1500); 
            e.clearSelection();    
            console.log(e.clearSelection);    
        });    
    });    
</script>
</div>

</div>
<a href="http://www.yzipi.com/3495.htm" class="fan">返回下载页</a>

</body></html>

 

效果演示地址:

http://www.yzipi.com/wp-content/down/yzipi103/index.html

 

注意:

引入 clipboard.min.js 版本很重要,我最初引入的是目前最高版本:clipboard2.0.6,结果点击实现不了效果,会报“Uncaught TypeError: Illegal constructor”错误,结果,我引了一个最低版本就正常了。

 

clipboard.min.js:

clipboard.js是一款JavaScript内容复制粘贴插件。现代化的拷贝文字,不依赖flash, 不依赖其他框架,gzip压缩后只有3kb大小。

 

中文官方网址:http://www.clipboardjs.cn/

github地址:https://github.com/zenorocha/clipboard.js/

    A+
发布日期:2020年09月16日 17:37:18  所属分类:JavaScript
最后更新时间:2020-09-16 19:41:26
评分: (2 票;平均数3.00 ;最高评分 5 ;用户总数2;总得分 6;百分比60.00)
标签:
头像
SEO顾问 单站最低999元 整站全方位优化
SEO顾问 单站最低999元 整站全方位优化
  • ¥ 999元
  • 市场价:4999元
wp dz 帝国 dede phpcms等快速建站服务
wp dz 帝国 dede phpcms等快速建站服务
  • ¥ 999元
  • 市场价:4999元
Microsoft 全家桶 “激活码/产品密钥”永久
Microsoft 全家桶 “激活码/产品密钥”永久
  • ¥ 29.99元
  • 市场价:888元
PHP运行环境 wamp lamp lnmp 安装 配置 搭建
PHP运行环境 wamp lamp lnmp 安装 配置 搭建
  • ¥ 99.9元
  • 市场价:299元

发表评论

:?: :razz: :sad: :evil: :!: :smile: :oops: :grin: :eek: :shock: :???: :cool: :lol: :mad: :twisted: :roll: :wink: :idea: :arrow: :neutral: :cry: :mrgreen: