JavaScript

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

March 4, 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>
reference
back to note