微信號複製跟跳轉——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';
    }