プログラミング

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

メールアドレスが公開されることはありません。 * が付いている欄は必須項目です

関連記事

QRコードの画像ファイルから内容を読み取るWebページを作りました

目次1. はじめに2. スクリーンショット3. URL4. 操作と内容5. ソースコード6. 参考情報 1. はじめに QRコードの画像ファイルから内容を読み取る を作りました。 2. スクリーンショ …

Web Programming

History API のメモ

History API についての簡単な説明を書きました。 「History API の概要を思い出したくなった時に、ざっと眺める」というのがこのページの主な目的です。 目次1. History AP …

React Redux

React + Redux の最小限の雛形コード

ここに載せている JavaScriptのコードは、React + Redux を使っています。 但し、まだ何も意味のある処理を書いていないので、このままだと 属性 id=”root” を持った要素内に …

Web Components

Web Components: 組み込み要素を拡張する方法

目次1. はじめに2. 組み込みHTML要素を拡張する方法3. おわりに4. 参考 1. はじめに Web Components では、HTMLElement を継承してカスタムクラスを定義することも …

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

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