JavaScript | テキストエリアの内容をコピーする方法

2022-01-31

テキストエリア(textarea)の内容をコピーするボタンの実装方法を紹介しています。

ゲームのエクスポートデータやソースコードなどテキストエリアの中身をコピーするコンテンツは少なくありません。

強制的に全選択するタイプもありますが、コピーボタンの方が勝手が良いのかな、と思います。

テキストエリア(textarea)の入力イベントを実装する

テキストエリア(textarea)のの内容をコピーするボタンを実装した動作サンプルとサンプルコードになります。

テキストエリアへの入力・編集を不可に制御して、テキストエリアの内容を取得、コピーボタンでクリップボードにコピーします。

See the Pen JavaScript | Textarea Event by yochans (@yochans) on CodePen.

HTMLはコピー内容を表示する<textarea>とコピーボタン<button>、出力用の<p>タグをひとつ設置しています。

<textarea>にはreadonly属性を指定して編集・入力は不可にしています。

<p><textarea readonly>Copy this text.</textarea></p>
<p><button id="copy-btn">Copy</button></p>
<p id="output"></p>

サンプルではテキストエリアの内容をquerySelector()textContentを使って取得しています。

コピーボタンのクリックイベントはaddEventListene()「click」を指定しています。

クリップボードへのコピーはnavigator.clipboard.writeText()を利用しています。

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

//copy event
copy_btn.addEventListener(`click`, () => {

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

});