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>参考