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

エンジニアの中氏です。

ブラウザ上でクリップボードへのコピー機能の実装は便利なJSライブラリのzclipを従来利用していましたが、

Flash の機能を利用している為、将来的に Flash が完全廃止になった際に利用出来なくなることが予想されます。

よって、今回はピュアなJavaScriptのみでコピー機能を実装する方法をご紹介します。

具体的には document.execCommand を利用してコピーを行う方法です。

テキストの範囲選択して、document.execCommand('copy') を実行してコピーを行います。

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

1/**
2 * 指定した要素のテキストノードのテキストをコピー
3 *
4 * @param {string|HTMLElement} subject
5 */
6function copyByTextNode(subject) {
7let textNode = $(subject).get(0).childNodes[0];
8let range = document.createRange();
9range.selectNode(textNode);
10// 選択範囲解除
11getSelection().removeAllRanges();
12// 範囲選択
13getSelection().addRange(range);
14// コピー実行
15document.execCommand('copy');
16// 選択範囲解除
17getSelection().removeAllRanges();
18}

copyByTextNode([セレクタ])

で使用します。

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