IOS 10 이상에서도 동작하는 클립보드 복사 스크립트

크롬, 익스, 파이어폭스, 삼성브라우저, IOS 10 이상의 사파리에서 동작하는 클립보드 복사 스크립트입니다.

스크립트로 클립보드 복사하기 위하여 

1. 임시 textarea 생성 후 복사할 텍스트 삽입

2. 복사할 텍스트 영역을 선택하여 execCommand("copy")로 복사 실행

3. 임시 textarea 삭제

의 순서로 진행하면 됩니다.

중요한것은 2번인데,  IOS 10 이상의 사파리에서 execCommand("copy")를 실행하기 위해서는 복사할 텍스트의 영역을 잡아 줘야만 실행이 됩니다.

스크립트 코드는 다음과 같습니다.

function jsCopyLink(copyText) {
            
    var tmpTextarea = document.createElement('textarea');
    tmpTextarea.value = copyText;
 
    document.body.appendChild(tmpTextarea);
    tmpTextarea.select();
    tmpTextarea.setSelectionRange(0, 9999);  // 셀렉트 범위 설정
 
    document.execCommand('copy');
    document.body.removeChild(tmpTextarea);
    alert("URL 복사가 완료되었습니다."); 
              
}

select() 메소드로 임시 textarea를 선택하고, setSelectionRange() 메소드로 복사할 텍스트의 영역을 잡아준 후에 execCommand('copy')를 실행하면 IOS 10 이상 에서도 정상적으로 클립보드 복사가 가능해지는것을 볼 수 있습니다.

출처 : 

https://velog.io/@godori/js-clipboard-copy

https://stackoverflow.com/questions/34045777/copy-to-clipboard-using-javascript-in-ios