(JS) 클립보드 복사하기

Sep 19, 2022

by 김평안
서재 수첩 공방

navigator.clipboard와 document.execCommand 두 가지 방법을 통해 클립보드에 텍스트를 복사할 수 있습니다.

Clipboard API의 Clipboard 객체를 가져온 것으로 간편하게 관련 동작을 수행할 수 있습니다.
IE는 사용 불가, Safari는 13.4 이상부터 호환된다는 점을 유의해야합니다.

const copyToClipboard = async (url = window.document.location.href) => {
  try {
    await window.navigator.clipboard.writeText(url);
    alert('링크가 복사되었습니다.');
  } catch (e) {
    console.error(e);
    alert('클립보드 복사에 실패했습니다.');
  }
};

writeText는 사실 write를 쓰기 편하게 한번 래핑한 메소드입니다.
blob과 ClipboardItem을 활용해서 이미지도 복사를 할 수 있습니다.

const copyImageToClipboard = (imgURL) => {
  try {
    const data = await fetch(imgURL);
    const blob = await data.blob();
    await navigator.clipboard.write([
      new ClipboardItem({
        [blob.type]: blob
      })
    ]);
    alert('클립보드에 복사되었습니다.');
  } catch (err) {
    console.error(e);
    alert('클립보드 복사에 실패했습니다.');
  }
};

document.execCommand

오래된 웹 기술 중 하나로, 현재 Deprecated 되었습니다.
물론 현대 브라우저에서 “아직은” 이를 지원하기에 사용에 큰 지장은 없습니다.

const copyToClipboard = (url = window.document.location.href) => {
  let t = document.createElement('textarea');
  t.style.display = 'none';
  document.body.appendChild(t);
  t.value = url;
  t.select();
 
  const result = document.execCommand('copy');
  if (result === 'unsuccessful') {
    alert('링크가 복사되었습니다.');
  } else {
    alert('클립보드 복사에 실패했습니다.');
  }
 
  document.body.removeChild(t);
};

textarea 태그를 생성하여 키보드 copy 이벤트를 발생시킵니다.
body에 태그를 주입하는 것이 조금 찜찜하긴 곧바로 제거되기에 사용에는 문제가 없습니다.

참고