プログラミング

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

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

関連記事

WordPress

plugin-update-checker を使って WordPress のテーマに自動更新機能を実装する

目次1. はじめに2. テーマディレクトリに対する準備作業3. テーマを更新する手順3-1. テーマ提供者側3-2. 利用者側4. おわりに 1. はじめに plugin-update-checker …

web development

Web Development for Beginners を読む:レッスン12, 13, 14

目次1. はじめに2. Lesson 12: Browser Extension Project Part 1: All about BrowsersIntroductionAbout the bro …

React Redux

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

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

Web Programming

Service Worker の状態変化を検証するためのウェブページを作りました

Service Worker の状態変化を検証するためのウェブページを作りました。

Webサーバーの知識

分かりやすかった資料(外部サイト) 知っているようで知らないWebサーバアーキテクチャ // Speaker Deck