[JavaScript]クリップボードにコピーする

目的

クリップボードにコピーする機能をJavaScriptで実装する。

※「document.execCommand(‘copy’)」の方法は非推奨となっている。

完成イメージ

①以下、「メモを入力」の欄に任意の文字列を入力する。

②「コピーする」ボタンを押すと、「クリップボードにコピーしました！」というアラートが表示されます。

③そのまま任意のテキストエディターに ctrl + v すると「入力した内容」をペーストでき、コピーができていることがわかります。

ソースコード

<input type="text" id="copy-target" placeholder="メモを入力"  />
<button id="copy-btn" >コピーする</button>

document.getElementById("copy-btn").addEventListener("click", async () => {
  const content = document.getElementById("copy-target").value;
  try {
    await navigator.clipboard.writeText(content);
    alert("クリップボードにコピーしました!");
  } catch (err) {
    console.error("テキストのコピーに失敗しました", err);
  }
});