マイクロ・シグナルジャンプでコピー--execCommand（）RangeオブジェクトのHTML5のAPIエディタ

企業のビジネスニーズの前にいるので、私たちは、レプリケーションを実現するマイクロ・シグナルをクリックする必要があります。彼は、コピー機能を実現するためにdocument.execCommand（）メソッド内のjsで本日述べました。

ケースには、以下を達成することに関する：

1. [開く]をクリックしてポップアップ機能をオフにポップ;表示：ブロックとディスプレイ：なし切り替え

API-範囲の対象2.H5は提供;特に「行きRangeオブジェクトのHTML5のAPIエディタを表示するには、」。

3.document.execCommand（）メソッド。具体的な利用先住所：https://developer.mozilla.org/zh-CN/docs/Web/API/Document/execCommand

HTML部分

< ボタンのonClick = '_ toolTipOpen（）' >オープンポップ</ ボタン> 
    <！ - ポップコンテンツ- > 
    < divのID = '_ toolTipBox' のonClick = '_ toolTipClose（）' > </ divの> 
    < divのID = '_toolTip' > 
        < divのクラス= '_ tipText' > [ジョン・ドウ]マイクロチャンネルの友人を追加し、</ divの> 
        < divのクラス= '_ tipCode ' > < スパンID = "wechatCode" >微信</ スパン> </ 本部> 
        < divのクラス= '_ tipCopy ' onclickのは= "copywx（）" >コピー]をクリックします。</ divの> 
        < クラス= '_ tipOpenAPP' のhref = 'Weixin：//' >オープンマイクロチャネル< スパン>（なし反応、手動オープン）</ スパン> </ A > < DIV クラス= '_ toolTipClose' スタイル= '底：10pxの;'のonClick = '_ toolTipClose（）' >キャンセル</ DIV > </ DIV >

CSSのセクション

    #_toolTipBox { 
        表示：なし。
        幅：100％ ; 
        高さ：100％ ; 
        背景：RGBA（0,0,0,0.4） 。
        位置：固定 ; 
        トップ：0 ; 
        左：0 ; 
        z屈折率：90。
        トランジション：すべての0.8秒。
        } 
     #_toolTip { 
         表示：なし。
         位置：固定 ; 
         トランジション：すべての0.5秒。
         行の高さ：60PX ; 
         z屈折率：99。
         幅：90％ ; 
         テキスト整列：センター ; 
         マージン：自動 ; 
         左：0 ; 
         右：0 ; 
         下：10pxの ; 
         フォントファミリ：微软雅黑。
         国境半径：15ピクセル ; 
         色：＃4d9dfe。フォントサイズ：16pxに ; 
         }      
     #_toolTip ._tipText { 
         背景：#FFF。
         幅：100％ ; 
         高さ：60PX ; 
         行の高さ：60PX ; 
         border-bottom：1pxの固体＃D1D1D3。
         色：＃4d9dfe。
         国境半径：18px 18px 0 0; 
         }      
     #_toolTip ._tipCode { 
         背景：#FFF。
         border-bottom：1pxの固体＃D1D1D3。
         }  
     #_toolTip ._tipCopy { 
         背景：#FFF。
         border-bottom：1pxの固体＃D1D1D3。
         カーソル：ポインタ ;}      
     #_toolTip ._tipOpenAPP { 
         背景：#FFF。
         表示：ブロック ; 
         ボーダー半径：0 0 18px 18px ; 
         テキスト装飾：なし ; 
         色：＃4d9dfe ;}  
     #_toolTip ._tipOpenAPPスパン { 
         フォントサイズ：14px ; 
         色：＃888 ;}      
     #_toolTip ._toolTipClose { 
         背景：#FFF。
         国境半径：18px ; 
         マージントップ：18px ; 
         カーソル：ポインタ ;}

JSの一部

        // マイクロ信号レプリカ
    関数copywx（）{
     // 、物体上の連続領域の範囲はオブジェクトが範囲ページを表し、または編集ページ上の任意の領域で得ることができる
    // 空の範囲オブジェクト作成 
    CONST範囲= document.createRangeを（）;
     // ノードの出発点として対象範囲Rangeオブジェクトの開始点を指定するselectNode方法は、Rangeオブジェクトノードの指定されたエンドポイントの終点
    // 領域はそれほどノードによって表さRangeオブジェクトが含まれてい。
    range.selectNode（のdocument.getElementById（「wechatCode」））;
     // HTML5で、各ブラウザ・ウィンドウ、および各ウィンドウは、選択されたページのマウスにおけるユーザ領域を表す選択オブジェクトを有する
    // （注意：以下のIE9ブラウザをテストした後Selectionオブジェクトをサポートしていません）、
    // 次のステートメントでオブジェクトの選択を作成し、 
    constの選択= window.getSelection（）;
     IF（selection.rangeCount> 0 ）
    {    // removeAllRangesは（）を削除し、現在の選択範囲からすべてのオブジェクトが対象である
        selection.removeAllRanges（）;
         // 領域seletion.addRange（範囲）（範囲）は、オブジェクトの選択（選択）それらに追加されます。
        selection.addRange（範囲）;
        //は、クリップボードに現在の選択をコピーします。
        document.execCommand（ 'コピー' ）; 
        警告（ "正常にコピーされたマイクロ信号！" ）; 
    } 他
    { 
        アラート（ 'マイクロ複製信号に障害が発生し、手動でコピー！' ）; 
    } 
} 
/ * ポップを開く* / 
    機能_toolTipOpen（ ）{ 
        
        のdocument.getElementById（ '_toolTipBox'）style.display = 'ブロック'。;
        document.getElementById（ '_toolTip'）style.display = 'ブロック' 。
    }。
      / * 关闭弹窗* / 
    関数_toolTipClose（）{ 
      
        のdocument.getElementById（ '_toolTipBox'）style.display = 'なし' ; 
        document.getElementById（ '_toolTip'）style.display = 'なし' 。
    }

マイクロ・シグナルジャンプでコピー--execCommand（）RangeオブジェクトのHTML5のAPIエディタ

おすすめ