[Javascript] Clipboard API와 execCommand를 이용해 텍스트 복사하기

Clipboard API와 execCommand를 이용해 텍스트 복사하기

자바스크립트를 이용해서 사용자의 클립보드에 내용을 복사해 주는 여러가지 방법을 정리해 보겠습니다.

대표적으로 컨텐츠 공유를 위한 URL 복사 기능을 예로 들 수 있습니다.

복사 구현하기

Javascript의 Clipboard API를 이용해 복사를 구현해 보겠습니다.

Clipboard API는 보안상의 이유로 HTTPS 환경과 예외적으로 localhost 환경에서만 동작합니다.

HTTP 환경에서의 복사기능은 execCommand API를 사용해 구현해 보겠습니다.

구현부

writeText() 메서드로 클립보드에 텍스트를 복사합니다.

then() 메서드를 이용해 복사되었을 경우 콜백 함수를 정의할 수 있습니다.

catch() 메서드는 어떤 이유로 복사가 실패했을 경우 에러를 캐치해 줍니다.

function copyToClipboard() {
    const url = 'https://example.com';
    const success = () => console.log('URL을 클립보드에 복사했습니다.');
    const failure = (err) => console.error('클립보드에 URL을 복사하지 못했습니다. : ', err);
    
    try {
    	// Clipboard API를 지원하는 경우
        if (navigator.clipboard) {
            navigator.clipboard
                .writeText(url)
                .then(success)
                .catch(failure);
        } else {
	// Clipboard API를 지원하지 않는 경우
            const tempInput = document.createElement('textarea');
            tempInput.value = url;

            document.body.appendChild(tempInput);
            tempInput.select();

            const successful = document.execCommand('copy');
            if (successful) {
                success();
            } else {
                failure('execCommand를 통한 복사 실패');
            }
            document.body.removeChild(tempInput);
    } catch (error) {
        failure(error);
    }
}

 

마치며

별 것 아니라고 생각했던 클립보드 사용에도 다양한 방법과 케이스가 있다는 것을 알게 되었습니다.

감사합니다!