[JQUERY] 클립보드(clipboard) 간편하게 복사하는 방법(꿀팁)

안녕하세요, 오늘은 JQUERY 클립보드로 텍스트를 복사하는 방법에 대해서 알아보도록 하겠습니다.

 

기본적인 방법은 3단계로 나뉠 수 있습니다.

1. 이벤트 처리 버튼과 INPUT BOX에 데이터 세팅하기

2. 사용자가 복사하기 버튼을 클릭하면 INPUT BOX의 데이터를 클립보드로 복사

3. 주의할 점

1. 이벤트 처리 버튼과 INPUT BOX에 데이터 세팅하기

<div>
    <button type="button" id="data-copy" class="data-copy">복사하기</button>
    <input type="hidden" id="data-area" class="data-area" value="https://ssd0908.tistory.com">
</div>

위와 같이 이벤트를 처리할 버튼과 복사할 텍스트를 준비합니다.

클립보드로 데이터를 복사하는 방법은 여러 가지가 있지만 그중에서 가장 간단한 방법으로 접근해 봅니다.

보통 데이터를 담고 있는 INPUTBOX를 화면에서 안 보이게 처리하는데 여러 방법 중 INPUTBOX를 hidden 처리하여 화면에서 숨김 처리합니다.

 

---

2. 사용자가 복사하기 버튼을 클릭하면 INPUT BOX의 데이터를 클립보드로 복사

// 복사하기 버튼 클릭
$('#data-copy').click(function() {

    // 화면에서 hidden 처리한 input box type을 text로 일시 변환
    $('#data-area').attr('type', 'text');
    
    // input에 담긴 데이터를 선택
    $('#data-area').select();
    
    //  clipboard에 데이터 복사
    var copy = document.execCommand('copy');
    
    // input box를 다시 hidden 처리
    $('#data-area').attr('type', 'hidden');
    
    // 사용자 알림
    if(copy) {
    	alert("데이터가 복사되었습니다.");
    }
});

input box를 사용자 화면에서 숨김 처리 하기 위한 방법은 여러 가지 방법이 있습니다.

 - display:none 처리

 - opacity를 0 처리

 - position - absolute 처리

 - input - hidden 처리

 

여러가지 방법 중 input을 hidden 처리하여 사용자 화면에서 데이터를 숨김 처리한 후 위와 같은 방법으로 스크립트에서 타입을 변경하여 clipboard에 데이터를 복사한 후 다시 hidden 처리하면 간단하게 복사할 수 있습니다.

 

3. 주의할 점

exeCommand는 IE 9.0 미만과 사파리(safari) 브라우저에서는 지원하지 않습니다. 제가 여러 브라우저를 테스트해본 결과 크롬, 엣지, 파이어폭스, IE 10 이상에서는 잘 작동합니다.

오늘도 정독해 주셔서 감사합니다:)