SEEDS Creator's Blog

ブラウザ上でJavaScriptを利用したクリップボードへのコピー機能の実装

エンジニアの中氏です。

ブラウザ上でクリップボードへのコピー機能の実装は便利なJSライブラリのzclipを従来利用していましたが、 Flash の機能を利用している為、将来的に Flash が完全廃止になった際に利用出来なくなることが予想されます。

よって、今回はピュアなJavaScriptのみでコピー機能を実装する方法をご紹介します。 具体的には document.execCommand を利用してコピーを行う方法です。 テキストの範囲選択して、document.execCommand('copy') を実行してコピーを行います。

ここでは、画面に表示されているテキストをコピーするという例で下記に関数の例を記載します。

/**
 * 指定した要素のテキストノードのテキストをコピー
 *
 * @param {string|HTMLElement} subject
 */
function copyByTextNode(subject) {
    let textNode = $(subject).get(0).childNodes[0];
    let range = document.createRange();
    range.selectNode(textNode);

    // 選択範囲解除
    getSelection().removeAllRanges();

    // 範囲選択 
    getSelection().addRange(range);

    // コピー実行
    document.execCommand('copy');

    // 選択範囲解除
    getSelection().removeAllRanges();
}

copyByTextNode([セレクタ]) で使用します。

セレクタを指定するだけで、そのDOMのテキストノードをコピー出来ます。