h 5クリップボードへの貼り付け文字のコピー

需要:ボタンをクリックする時ある段落の文字をコピーして、転送する時直接貼ることができます

<div id="copy-txt">
          ，         ：**   ，     ，     ！
div>
<button onclick="copyTXT()">  button>

HTML 5には、以下のAPIがあります.

document.createRange():選択されたコンテナを作成し、range Objectを返し、モバイル端子とPC端子をサポートします.

selectNode(DOM):選択した要素を追加するには、range Objectにマウントされたメソッドを返します.追加できるのは1つだけです.

window.getSelection():現在選択されている要素の内容を取得します.一般的には、ページの内容をマウスで選択します.

addRange(range):このメソッドは、要素の選択を実行するためにgetSelection()メソッドの下にマウントされます.

function copyTXT(){
    var copyDOM = document.querySelector('#copy-txt'); //   DOM  
    var range = document.createRange(); //     
    range.selectNode(copyDOM); //          
    window.getSelection().addRange(range); //       
    var successful = document.execCommand('copy');//    copy   
    try {
        var msg = successful ? 'successful' : 'unsuccessful';
        console.log('Copy was ' + msg);
    } catch(err) {
        console.log('unable to copy');
    }
    window.getSelection().removeAllRanges(); //        
}

注意すべきは、以上のレプリケーションの方法は自主的に実行できないことです.つまり、クリック、長押しなど、あるイベントをトリガーする必要があります.