微信号复制跟跳转—

之前由于公司的业务需求，需要点击实现微信号复制功能。今天说下js里面document.execCommand()方法实现复制功能。

本次案例实现涉及以下几点：

1.点击打开弹窗关闭弹窗的功能；display：block和display：none的切换

2.H5提供的API-range对象；具体可去《HTML5编辑API之Range对象》查看.

3.document.execCommand()方法使用。具体用法地址：https://developer.mozilla.org/zh-CN/docs/Web/API/Document/execCommand

HTML部分

<button onClick='_toolTipOpen()'>打开弹窗</button><!-- 弹窗内容 --><div id='_toolTipBox' onClick='_toolTipClose()'></div><div id='_toolTip'><div class='_tipText'>加[李四]微信好友</div><div class='_tipCode '><span id="wechatCode">wechat</span></div><div class='_tipCopy ' onclick="copywx()">点击复制</div><a class='_tipOpenAPP' href='weixin://'>打开微信<span>（如无反应，请手动打开）</span></a><div class='_toolTipClose' style='bottom: 10px;' onClick='_toolTipClose()'>取消</div></div>

css部分

    #_toolTipBox {display:none;width:100%;height:100%;background:rgba(0,0,0,0.4);position:fixed;top:0;left:0;z-index:90;transition:all 0.8s;}#_toolTip {display:none;position:fixed;transition:all 0.5s;line-height:60px;z-index:99;width:90%;text-align:center;margin:auto;left:0;right:0;bottom:10px;font-family:微软雅黑;border-radius:15px;color:#4d9dfe;font-size:16px;}     #_toolTip ._tipText {background:#FFF;width:100%;height:60px;line-height:60px;border-bottom:1px solid #D1D1D3;color:#4d9dfe;border-radius:18px 18px 0 0;}     #_toolTip ._tipCode {background:#FFF;border-bottom:1px solid #D1D1D3;} #_toolTip ._tipCopy {background:#FFF;border-bottom:1px solid #D1D1D3;cursor:pointer;}     #_toolTip ._tipOpenAPP {background:#FFF;display:block;border-radius:0 0 18px 18px;text-decoration:none;color:#4d9dfe;} #_toolTip ._tipOpenAPP span {font-size:14px;color:#888;}     #_toolTip ._toolTipClose {background:#FFF;border-radius:18px;margin-top:18px;cursor:pointer;}

js部分

        // 微信号复制function copywx(){//Range对象代表页面上的一段连续区域，通过Range对象，可以获取或修改页面上的任何区域，//创建一个空的Range对象const range = document.createRange();//Range对象的selectNode方法用于将Range对象的起点指定为某个节点的起点，将Range对象的终点指定为该节点的终点，//使Range对象所代表的区域中包含该节点。range.selectNode(document.getElementById('wechatCode'));//在html5中，每一个浏览器窗口及每一个窗口中都有一个selection对象，代表用户鼠标在页面中所选取的区域，//(注意：经过测试IE9以下的浏览器不支持Selection对象), //可以通过如下语句创建selection对象；const selection = window.getSelection();if(selection.rangeCount > 0) {   //removeAllRanges()从当前selection对象中移除所有的range对象
        selection.removeAllRanges();//seletion.addRange(range)一个区域（Range）对象将被增加到选区（Selection）当中。
        selection.addRange(range);// 拷贝当前选中内容到剪贴板。document.execCommand('copy');alert("微信号复制成功！");}else{alert('微信号复制失败，请手动复制！');}
}
/*打开弹窗*/function _toolTipOpen() {document.getElementById('_toolTipBox').style.display = 'block';document.getElementById('_toolTip').style.display = 'block';};/*关闭弹窗*/function _toolTipClose() {document.getElementById('_toolTipBox').style.display = 'none';document.getElementById('_toolTip').style.display = 'none';}

转载于:https://www.cnblogs.com/smile-xin/p/11619906.html

微信号复制跟跳转——execCommand()相关推荐

微信号复制跟跳转——clipboard.js
clipboard.js是现代化的"复制到剪切板"插件. 安装: 1.通过npm 安装:npm install clipboard --save 2.官网下载:https://cl ...
微信广告转化统计java,百度推广oCPC微信号复制转化次数统计系统数据接口
对于百度搜索oCPC,很多竞价可能会感觉比较模糊,本来是一个能够有效控制成本提升转化的程序化产品,但由于大家理解不深,实际操作中就会遇到诸多问题,成本难以控制.账户优化困难. 结合加粉账户页面案例给大 ...
好多粉详解—百度OCPC怎么提交微信号复制数据和转化数据？
好多粉-免费推广复制统计工具,详细的说下百度目前最常见的3种数据提交方式: 1.埋点提交(最简单,效果一般) 2.js代码监测提交(表单提交)(较简单,效果较好) 3.api提交(困难,效果较好) 下 ...
如何统计复制微信号转化次数？微信号复制统计？
如何统计复制微信号转化次数?微信号复制统计? 还不知道如何统计微信号的复制数据.这里大家可以了解一下六个赞加粉统计,主要分为三大模块,大家可以了解一下.微信号复制统计.关键词复制统计工具.微信号在线管 ...
html长按微信号复制,苹果系统中长按复制微信号显示不全问题解决方法
摘要:在移动系统中都可以直接实现长按复制,不管是安卓系统还是苹果系统,都可以直接实现,但是在苹果系统中如果被长按选中的微信号前面有文本,那么被选中的微信号就会少两位. 随着微信的普及,很多运营者都会在 ...
2023 点击微信号复制跳转微信网页源码
最近,有客户委托我们开发一个手机网站,要求在网站上实现"一键复制微信号并自动打开微信加好友"的功能.那么我们该如何实现这个功能呢? 首先,我们需要在网页上设置一个按钮,按钮上显示客 ...
如何在浏览器中点击复制微信号并且跳转到微信
如何在浏览器中点击复制微信号并且跳转到微信? <html lang="en"> <head> <meta charset="UTF-8&qu ...
jq 点击按钮跳转到微信_实现点击复制微信号并自动打开微信加好友
原地址:https://www.xuewangzhan.net/jquery/21100.html 复制按钮xyz2018 点击复制 clipboard.on('success', function( ...
如何统计复制微信号转化次数？
如何统计复制微信号转化次数? 在网络推广中,由于庞大的用户群体和极高的使用频次,微信被越来越普遍的作为销售和客服工具,大大提高了营销推广转化的效率. 但是由于涉及不同的载体(访客从落地页复制微信号码, ...

微信号复制跟跳转——execCommand()

微信号复制跟跳转——execCommand()相关推荐

最新文章

热门文章