ラボラジアン 目次
1. はじめに
ウェブページ上の文字列をクリップボードにコピーする JavaScriptの書き方を 2つ紹介します。
- Clipboard API and events を使う方法
- Selection API を使う方法
スポンサードリンク
2. Clipboard API and events を使う方法
Clipboard API and events を使います。こちらの方が簡単です。
(1) まず、画面上の文字列を取得します。ここでは id="pID" という属性を持った <p> タグの内容を取得して、変数 txt にセットしたとします。
const txt = document.querySelector('#pID').innerText;
(2) この文字列をクリップボードにコピーするには以下を記述するだけです。
navigator.clipboard.writeText(txt)参考
ブラウザの対応状況
3. Selection API を使う方法
Selection API を使う方法です。結構面倒です。
メモ
クリップボードに文字列をコピーするには、clipboard.js というライブラリを使うこともできます。このライブラリの中では、GitHub – zenorocha/select という「HTML要素の文字列を選択する」ための JavaScriptコードが利用されています。
これらのライブラリは npmパッケージとしても提供されており、それぞれのリンクは以下となります。
今回はライブラリを使いませんが、clipboard.js と select のソースコードは参考にしました。
(1) 基礎知識
主に selection というオブジェクトと range というオブジェクトを利用します。画面上の要素の範囲を指定したり、その部分を選択状態にしたり、といった処理を行うことができます。
参考
ブラウザ実装状況
(2) プログラムの書き方
<p>要素内の文字列をクリップボードにコピーする例で説明します。
やりたいのは、「コピーしたい要素を選択状態にする」→「クリップボードにコピーする」という処理です。
最低限必要になるソースコードは以下です。説明はコメントに書いておきました。
HTML
<p id="targetID">この文字列をクリップボードにコピーします！</p>
JavaScript
// 目的の文字列が入っている p要素を取得します。
const element = document.querySelector('#targetID');
// seletionオブジェクトを取得します。
const selection = window.getSelection();
// rangeオブジェクトを生成します。
const range = document.createRange();
// rangeオブジェクトに p要素を与えます。
range.selectNodeContents(element);
// 一旦、selectionオブジェクトの持つ rangeオブジェクトを削除します。
selection.removeAllRanges();
// 改めて先程生成した rangeオブジェクトを selectionオブジェクトに追加します。
selection.addRange(range);
console.log('選択された文字列: ', selection.toString());
// クリップボードにコピーします。
const succeeded = document.execCommand('copy');
if (succeeded) {
// コピーに成功した場合の処理です。
console.log('コピーが成功しました！');
} else {
// コピーに失敗した場合の処理です。
console.log('コピーが失敗しました!');
}
// selectionオブジェクトの持つrangeオブジェクトを全て削除しておきます。
selection.removeAllRanges();
(3) サンプルページ
このコードを使ったページを、JSFiddleに作っておきました。
右下のエリア内にある「クリップボードにコピーします」ボタンを押すと、クリップボードに文字列がコピーされます。その後、メモ帳などに貼り付けて確かめて下さい。
4. おわりに
何年か前までは、Clipboard API がそれほど普及していませんでしたので、Selection API を使って「クリップボードにコピー」を行っていました。
ウェブはいつの間にか新しい機能が増えているので、それに気付かず古いやり方をずっと使ってしまうことがあります。
