JavaScript | テキストをクリップボードにコピーする方法

JavaScript,JavaScript イベント

JavaScriptでテキストをクリップボードにコピーするボタンイベントを方法を紹介しています。

テキストをクリップボードにコピーする

テキストをクリップボードにコピーするボタンイベントを実装するJavaScriptのサンプルコードです。

サンプルではコピーボタンを設置してpタグにあるテキストをクリップボードにコピーします。

See the Pen JavaScript Get browser zoom level by yochans (@yochans) on CodePen.

HTMLには、コピーするテキストのあるpタグ、押したらコピーを実行するButtonタグ、結果を表示する用のpタグを作成しています。

<p id="copy-text">Copy text</p>
<button id="copy-btn">Copy</button>
<p id="opuput"></p>

querySelector()でコピーするテキストのある要素を、textContentで内にあるテキストを取得しています。
コピーするテキストはページ上にないものでも、問題ありません。

コピーボタンに対してaddEventListenerでクリックイベントを実装、navigator.clipboard.writeText()の引数にコピーするテキストを指定してコピーを実行します。

コピーに成功した場合、または失敗した場合を判別して処理を追加可能です。

let copy_text = document.querySelector('#copy-text').textContent;

document.querySelector('#copy-btn').addEventListener(`click`, function () {

	navigator.clipboard.writeText(copy_text).then(function () {
		// コピーに成功した場合の処理
		document.querySelector('#opuput').textContent = 'copied it to the clipboard';
	}, function () {
		// コピーに失敗した場合の処理
	});

});

以下のコードはアロー関数バージョンになります。

let copy_text = document.querySelector('#copy-text').textContent;

document.querySelector('#copy-btn').addEventListener(`click`, () => {

	navigator.clipboard.writeText(copy_text).then(() => {
		// コピーに成功した場合の処理
		document.querySelector('#opuput').textContent = 'copied it to the clipboard';
	}, () => {
		// コピーに失敗した場合の処理
	});

});