[jQuery] 를 이용해 텍스트를 클립보드로 복사하는 방법을 알아보자

🕓2018.03.23 📈12

[[jQuery]] 를 이용하여 [[클립보드]]로 특정 내용을 복사하는 방법을 알아봅시다.

아래 예제는 워드프레스로 만들어진 블로그의 현재 포스트 주소를 클립보드로 복사하여 방문자가 쉽게 해당 페이지 주소를 공유하도록 하기 위함입니다.

기본적인 프로세스

위 작업은 아래와 같은 방식으로 진행 됩니다.

포스트에 Copy URL 이라는 버튼 생성
InputBox 를 만들어 그 내용에 현재 페이지 url 담기
방문자가 Copy URL 버튼을 누르면 Input Box 의 url 이 클립보드로 복사
방문자에게 url 이 복사 되었음을 알림

하나씩 차근차근 해봅시다.

Copy URL 버튼 생성

방문자가 현재 페이지의 주소를 복사 할 수 있도록 하는 Copy URL 버튼을 만들어봅시다. HTML 을 이용해 간단하게 만들되 jQuery 에서 함수를 실행 할 수 있도록 id 나 class 를 반드시 넣어줍니다.

<span id="copy-url">Copy URL</span>

InputBox 만들기

이제 InputBox 를 만들어 그 내용으로 현재 페이지의 주소를 담을 것입니다.

우리가 사용하려고 하는 기능이 쉽게 클립보드 복사를 구현할 수 있는 execCommand 이기 때문에 InputBox 를 만들어 사용하는 것입니다.

<input 
    id="textbox-url" 
    value = "<?php echo esc_url( get_permalink(); ); ?>" 
/>

클립보드 복사 jQuery 함수 만들기

클립보드 복사를 위한 jQuery 함수를 만들어 봅시다. 이 함수는 사용자가 Copy URL 버튼을 눌렀을 때 실행됩니다.

jQuery( '#copy-url' ).click(
    function() {
        var urlbox = document.getElementById( 'textbox-url' );
        urlbox.select();
        document.execCommand( 'Copy' );
        alert( 'URL 이 복사 되었습니다.' );
    }
);

copy-url 이라는 id 를 가진 버튼을 클릭하면 아래와 같은 작업이 진행 됩니다.

urlbox 라는 변수를 id 가 textbox-url 인 요소로 지정
urlbox 요소의 내용을 모두 선택
execCommand 기능을 이용해 현재 선택된 내용(urlbox 의 내용)을 클립보드로 복사
사용자에게 URL 이 복사 되었음을 알려주는 메시지 박스 출력

간단하죠?

주의할 점

Input box 를 감추고 싶을 때

위와 같은 방식으로 작업이 진행 되는데 사용자에게 보여지는 InputBox 가 만드는 사람 입장에서는 눈에 거슬려 안보이게 하고 싶을 수 있습니다.

보통은 해당 InputBox 에 display: none; 이나 width: 0; height: 0; 과 같은 방식으로 InputBox 자체를 화면상에서 사라지게 만들수 있지만, 이 경우 urlbox.select() 명령이 먹히지 않을 수 있어요.

그래서 width 와 height 는 1로 지정하고 padding 과 border 가 지정 되어 있다면 이 모두를 0 으로 설정한 후 구석에 치워버리는 방법이 있습니다.

저는 아래와 같이 InputBox 에 스타일을 적용했습니다.

#textbox-url {
    position:   absolute;
    top:        0;
    left:       0;
    width:      1px;
    height:     1px;
    margin:     0;
    padding:    0;
    border:     0;
}

만드는 사람에 따라서 어떻게 스타일링 하든지 상관은 없지만, 중요한 것은 해당 InputBox 가 화면에서 사라지거나 크기가 0 이면 안된다는 것입니다.

exeCommand 는 구형 브라우저에서 작동 불가

exeCommand 는 IE 9.0 버전 미만과 사파리는 지원하지 않습니다. 파이어폭스, 크롬, 엣지 등의 최신버전에서는 잘 작동합니다. 다만 여전히 구형 브라우저를 사용하는 분들이 많기 때문에 에러가 발생할 경우 사용자에게 메시지 박스를 표시해주는 것도 좋은 방법입니다.