JavaScript | テキストエリアの内容をコピーする方法
テキストエリア（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`, () => {
// copy eventにテキストをコピー、成功の可否で結果を表示する
navigator.clipboard.writeText(copy_text).then(() => {
output.textContent = 'Copied it to the clipboard.';
}, () => {
output.textContent = 'Could not copy.';
});
});