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="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.';
});
});