エンジニアの中氏です。
ブラウザ上でクリップボードへのコピー機能の実装は便利な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のテキストノードをコピー出来ます。
Comments are closed.