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

之前由于公司的业务需求，需要点击实现微信号复制功能。今天说下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.icode9.com/content-4-483751.html