Javscript Clipboard (feat. 사파리에서 동작하지 않는다면?)

클립보드에 데이터를 복사하는 방법은 크게 execCommand API를 사용하거나 ClipboardAPI를 사용하는 두 가지 방법이 존재한다.
ClipboardAPI는 execCommand API보다 최신 스펙으로, 아직 지원되지 않는 브라우저가 비교적 많은 편이다.

그 외에 클립보드 복사 기능을 지원하는 라이브러리인 clipboard.js 는 폭 넓은 브라우저를 지원한다.

execCommand API

복사할 메시지는 input이나 textarea에 존재해야하므로, element를 생성해서 복사하고 제거하는 방식으로 해야한다.

var textarea = document.createElement('textarea');
textarea.value = 'message';                // 복사할 메시지
document.body.appendChild(textarea);
textarea.select();
textarea.setSelectionRange(0, 9999);    // For IOS
document.execCommand('copy');
document.body.removeChild(textarea);

Clipboard API

// 읽기
navigator.clipboard.readText().then((text) => {
    console.log('Pasted content: ', text);
});

// 쓰기 
navigator.clipboard.writeText(location.href).then(() => {
    console.log('success');
});

해당 API를 사용하면 브라우저에서 권한 사용 요청 팝업이 발생하고,
Permission API를 이용하여 권한 상태를 확인할 수도 있다.

사파리에서 클립보드가 동작하지 않을때!

1. Clipboard API는 사파리 13.1 버전부터 https 환경에서만 지원된다.
   New WebKit Features in Safari 13.1 링크의 Async Clipboard API 부분을 확인하면 된다.

2. 사용자의 액션 직후에 Copy가 이루어져야 한다.
   execCommand API를 사용해도 사파리에서 클립보드가 동작하지 않으면 해당 문제를 의심해볼만하다.
   우리는 clipboard에 복사할 메시지를 구하기 위해서 우리는 ajax를 호출할수도 있다.
   button 클릭 -> onclick 이벤트 발생 -> 복사할 메시지를 구하기 위해 ajax를 통해 서버에 요청 -> 응답이 오고 복사할 메시지를 clipboard copy를 이용하여 복사.
   이러한 경우에는 사파리에서 복사가 되지 않는다. 버튼을 누른 직후에 copy를 하지 않고, ajax를 통해 callback에서 copy가 이루어졌기 때문이다. (이러한 경우엔 위에서 언급한 clipboard.js도 동작하지 않는다.)
   이러한 문제를 해결하기 위해서는 복사할 메시지를 미리 구해놓고 button이 클릭되어 클릭 이벤트가 발생하였을때 바로 clipboard로 복사가 되어야 한다.