JS

ネイティブネタ帳

UI

モーダル

タブ

ドロワー

スライダー

スクロール

アコーディオン

目次

ローディングアニメーション

ツールチップ

ヘッダー

テーブル

グラフ

背景

フォーム

フォーム

文字

文字の装飾

文字の操作

文字のカウント

数字の操作

ウィンドウ

ウィンドウ操作

タイトルの操作

ページ遷移時の動き

class

classの操作

要素

要素の操作

要素の追加

API

WP REST API

Google Books APIs

楽天市場API

openBD

画像・動画

画像の操作

YouTube

リンク

Google Analytics

cookie

検索

検索

お気に入り登録

JavaScriptの.execCommand(‘copy’)でテキストをクリップボードにコピー

お気に入り登録をすると、お気に入り記事一覧に登録することができます。

.execCommand('copy')

JavaScriptの.execCommand(‘copy’)でテキストをクリップボードにコピー

JavaScriptの.execCommand(‘copy’)でテキストをクリップボードにコピー

JavaScriptの .execCommand('copy') を使って、クリップボードの操作をします。

現在このメソッドは、非推奨となっている為、今後利用できなくなる可能性があり、その場合には Clipboard API が推奨されているので、あわせてそちらもチェックするようにしましょう。

.execCommand(‘copy’)

JavaScriptの document.execCommand('copy'); は、任意のテキストをクリップボードにコピーするメソッドです。

document.execCommand('copy');
かかかず
かかかず

ちなみに、カットする場合は .execCommand('cut') と記述します。

現在、Document.execCommand() は非推奨

MDN web docsによると、「使用を避け、できれば既存のコードは更新してください。」の一文で、非推奨になっています。記事執筆時点では動作していますが、今後動作しなくなる可能性が高いので、使用はご注意ください。

クリップボードのサンプル

早速サンプルです。

テキストエリアに表示された「テキスト」が、「テキストをコピー」のボタンクリックでクリップボードにコピーされ、完了すると「コピーしました。」のメッセージがウインドウにアラート表示されます。

かかかず
かかかず

テキストエリアの文字列はブラウザで変更可能です。

実装の手順と方法

各コードの解説の前に、実装の手順と方法について簡単にご説明します。

HTMLを記述

はじめに、設置したい場所にHTMLのコードを記述します。

<input type="text" value="テキスト" id="copyTxt">
<button id="copyBtn"><i class="fas fa-copy"></i> テキストをコピー</button>
JavaScriptを記述

次に、JavaScriptのコードをページに記述します。

コードは <body>〜</body> で、</body> の閉じタグ(クロージングタグ)の前に記述しましょう。

document.getElementById('copyBtn').addEventListener('click', () => {
  document.getElementById('copyTxt').select(); // テキストエリアを選択
  const elementTxt = document.getElementById('copyTxt'); /// テキストエリアを取得
  document.execCommand('copy');  //クリップボードへコピー
  alert('「' + elementTxt.value + '」をコピーしました。'); // コピー完了時にアラートで表示
});

ざっくりとしたコードの解説

コードはHTML・JavaScriptの2種で、見た目を整える部分はないのでCSSは割愛しています。順に解説していきます。

HTML

HTMLは、テキストエリアの input タグと、テキストのコピーを行う button タグの2種類です。

<input type="text" value="テキスト" id="copyTxt">
<button id="copyBtn"><i class="fas fa-copy"></i> テキストをコピー</button>

input タグの value="" には、コピーされるテキストのデフォルトの値を入力するようにしましょう。

JavaScript

JavaScriptは、HTMLで設置したボタンクリックをトリガーにする .addEventListener を使い、まずはじめに.select() メソッドで要素内のテキストを選択します。

テキストを選択したら、テキストエリアを取得して document.execCommand('copy'); で文字列のコピー。そして、alert(); でウィンドウ内にアラートを表示させます。

document.getElementById('copyBtn').addEventListener('click', () => {
  document.getElementById('copyTxt').select(); // テキストエリアを選択
  const elementTxt = document.getElementById('copyTxt'); /// テキストエリアを取得
  document.execCommand('copy');  //クリップボードへコピー
  alert('「' + elementTxt.value + '」をコピーしました。'); // コピー完了時にアラートで表示
});
かかかず
かかかず

余談ですが、.addEventListener でコードを書いておくとメンテナンスも簡単です。

さいごに

手順と方法

この記事のテキストエリアは、文字の変更等いじれるようにしていますが、テキストの修正ができないようにするにはCSSで pointer-events: none; を書いてあげれば、変更不可に設定できます。