osgsm.io
HomeNotesJavaScript で投稿の URL をコピーするボタンを実装する

JavaScript で投稿の URL をコピーするボタンを実装する

Published Mar 4, 2025
Updated Mar 17, 2025

Clipboard API を使うことで、システムのクリップボードの読み書きを行える。クリップボードに書き込むには Clipboard インターフェースの writeText() メソッドを使う。

navigator.clipboard.writeText(url);

writeText() は Promise を返すので、次のようにコピーが正常に機能したときに "Copied" というテキストを表示したりできる。

export const initCopyUrl = () => {
  const copyUrlButtons =
    document.querySelectorAll<HTMLButtonElement>('.js-copy-url');
 
  const handleTransitionEnd = ({ currentTarget }: TransitionEvent) => {
    if (!(currentTarget instanceof HTMLElement)) return;
    currentTarget?.classList.remove('is-active');
  };
 
  const handleClick = async ({ currentTarget }: MouseEvent) => {
    if (!(currentTarget instanceof HTMLButtonElement)) return;
 
    const url = currentTarget.dataset.url;
    const copyStatus = currentTarget.nextElementSibling;
 
    if (!url) return;
 
    try {
      await navigator.clipboard.writeText(url);
      copyStatus?.classList.add('is-active');
    } catch (error) {
      console.error(error);
    }
  };
 
  copyUrlButtons.forEach((button) => {
    button.addEventListener('click', handleClick);
 
    const copyStatus = button.nextElementSibling;
    if (copyStatus instanceof HTMLElement) {
      copyStatus.addEventListener('transitionend', handleTransitionEnd);
    }
  });
};

今回の例では、次のようなマークアップを用意し、<button> のデータ属性にコピーしたい URL を挿入している。※ここでは Astro を使用。

<button type="button" class="js-copy-url" data-url={Astro.url}>
  Copy url
</button>
<span>Copied</span>

参考