プログラミング

JavaScriptで画面上の文字列をクリップボードにコピーする方法

投稿日:2016年11月2日 更新日:

1. はじめに

ウェブページ上の文字列をクリップボードにコピーする JavaScriptの書き方を 2つ紹介します。

  1. Clipboard API and events を使う方法
  2. 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.jsselect のソースコードは参考にしました。

(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に作っておきました。

右下のエリア内にある「クリップボードにコピーします」ボタンを押すと、クリップボードに文字列がコピーされます。その後、メモ帳などに貼り付けて確かめて下さい。

JSFiddleのスクリーンショット

4. おわりに

何年か前までは、Clipboard API がそれほど普及していませんでしたので、Selection API を使って「クリップボードにコピー」を行っていました。

ウェブはいつの間にか新しい機能が増えているので、それに気付かず古いやり方をずっと使ってしまうことがあります。

📂-プログラミング
-

執筆者:labo


comment

メールアドレスが公開されることはありません。

関連記事

TweenMax を使ったサンプルページを作りました

TweenMax を使ったサンプルページを作りました 目次1. スクリーンショット2. デモページ3. 内容4. ソースコード5. 参考情報 1. スクリーンショット スクリーンショット 2. デモペ …

Web Storage を使ったサンプルページを作りました

Web Storage を使ったサンプルページを作りました。 目次1. スクリーンショット2. デモページ3. 動作4. ソースコード5. 参考情報 1. スクリーンショット スクリーンショット 2. …

Canvas と WebGL を使ったサンプルページを作りました

Canvas と WebGL を使ったサンプルページを作りました 目次1. スクリーンショット2. デモページ3. 内容4. ソースコード5. 参考情報 1. スクリーンショット スクリーンショット …

no image

Pug(旧Jade)テンプレートファイル内で、npmでインストールしたモジュールを使う方法

Pug(旧Jade)というJavaScriptのテンプレートエンジンがありますが、このテンプレートファイル内では JavaScriptが使えるので、複雑なHTMLを生成することができます。 但しデフォ …

CSS Flexible Box Layout Module のサンプルページを作りました

CSS Flexible Box Layout Module のサンプルページを作りました。 目次1. スクリーンショット2. デモページ3. 内容4. ソースコード5. 参考情報 1. スクリーンシ …