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="output"></p>

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

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

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

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

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

copy_btn.addEventListener(`click`, () => {

navigator.clipboard.writeText(copy_text).then(() => {
		// true
		output.textContent = 'Copied it to the clipboard.';
	}, () => {
		// false
		output.textContent = 'Could not copy.';
	});

});