东府巴珠

 找回密码
 立即注册

QQ登录

只需一步,快速开始

手机版html+JavaScript点击微信号复制并打开微信代码

  [复制链接] [添加相关主题]
godkings 发表于 2022-4-28 11:07:09 | 显示全部楼层 |阅读模式
场景:手机端点击微信号时自动复制并提示复制成功,同时打开微信,作用是在某些页面上这样的功能可以方便用户快速添加客服微信号,避免那些在手机端不会使用复制的人不知道如何添加微信。
  1. <!DOCTYPE html>   
  2. <html lang="en">   
  3. <head>   
  4.     <meta charset="UTF-8">   
  5.     <script src="http://libs.baidu.com/jquery/1.9.0/jquery.js"></script>  
  6.     <script src="https://cdn.jsdelivr.net/clipboard.js/1.5.12/clipboard.min.js"></script>  

  7.     <title>复制按钮</title>   
  8. </head>   
  9. <body>  
  10. <div class="px-3 mt-1">
  11.              <i class="bi bi-phone-vibrate"></i> 手机号码:<a href="tel:13601031286" class="link-danger"><span id="target">13601031286</span></a>
  12.              <button class="btn text-muted p-0 float-end" id="v2_copysj" data-clipboard-text="13601032186">复制号码</button>
  13.       <script>   
  14.     $(document).ready(function(){
  15.         var clipboard = new ClipboardJS('#v2_copysj');
  16.         clipboard.on('success', function(e) {
  17.         alert("微信号复制成功",1500);
  18.     window.location.href='weixin://';
  19.     console.info('Text:', e.text);
  20.     e.clearSelection();
  21. });
  22.     });
  23. </script>
  24.         </div>  

  25. </body>
  26. </html>
复制代码


注意:需要先引入jQuery和clipboard这两个js文件。

效果:手机上点击手机号码时会弹出拨打,点“复制号码”会提示复制成功并打开微信
微信截图_20220428105859.png
clipboard官方git:
https://github.com/zenorocha/clipboard.js


上一篇:jquery获取上一级、同级、下级元素方法
回复

使用道具 举报

您需要登录后才可以回帖 登录 | 立即注册

本版积分规则

QQ|Archiver|小黑屋|东府巴珠 ( 京ICP备12023415号-2 )

声明:本站的任何信息和内容仅代表作者的立场和观点,与东府巴珠网无关。

禁止在东府巴珠主网发布任何与《中华人民共和国法律》相抵触的言论!

GMT+8, 2022-6-28 22:24 , Processed in 0.099006 second(s), 25 queries .

Powered by Discuz! X3.4

Copyright © 2001-2021, Tencent Cloud.

快速回复 返回顶部 返回列表