テキストをクリップボードにコピーするボタンをJavascriptで実装する【jQuery無し】

サイト上でボタンを１クリックするだけで、任意の文字列をクリップボードにコピーする機能をJavascriptだけで実装する方法を紹介します。

実装コード

jQueryなどのライブラリは一切不要です。HTMLとJavascriptのみで記述可能です。

HTML

<input type="text" id="target-text" value="ここにコピーしたい文字">
<button id="copy-btn">コピーする</button>

Javascript

document.getElementById('copy-btn').addEventListener('click', () => {
  const target = document.getElementById('target-text');
  target.select();
  document.execCommand('copy');
  alert('コピーしました！');
});

※現代のモダンブラウザでは、navigator.clipboard.writeText()を使用する方法がより推奨されます。