클립보드로 복사하기 javascript jQuery

프로세스

1. copy_btn 버튼을 생성
2. 복사하고 싶은 내용을 div 에 넣어주기
3. 방문자가 copy_btn 버튼을 클릭하면 input box 에 해당 내용 넣어주기.
4. 해당 input box. 내용을 클립보드로 복사
5. 방문자에게 클립복사 완료 메시지 뿌려주기.

 

 

INPUT ,  div 만들기

<input type="text" id="copy_target" style="position:absolute;top:-9999em;">
<div id="copy_target_div" class="d-none">
복사할 내용 보여주기.
</div>

input 은 display:none 이나 hidden 으로 처리하면 선택을 할 수 없기 때문에 하면 안됩니다.

복사할 내용은 꼭 div가 아니어도 상관 없습니다. 필요에 따라 변경하시면 됩니다.

 

클립보드 복사 스크립트 

클립보드에 복사하는 스크립트 문구는 아래와 같습니다.

execCommand 는 IE 9.0 미만과 사파리는 지원하지 않습니다. 그렇기 때문에 try 로 묶어서 사용하지 못할 경우 alert 메시지를 표시해 주는 것이 좋습니다.

<script type="text/javascript">
	$(document).ready(function(){
    	$('.copy_btn').click(function() {//클릭 이벤트
        	const text = $('#copy_target_div').html(); 
        	$('#copy_target').val(text);
            $('#copy_target').select(); 
            try { 
                const copy_successful = document.execCommand('copy');
            	alert("클립보드에 복사되었습니다"); 
            } catch (err) { 
                alert('이 브라우저는 지원하지 않습니다. 크롬을 사용해 주세요.');
            } 
          };
        });
    });
</script>

 

줄바꿈 내용 복사하기

한줄이 아닌 개행까지 필요한 클립보드 복사기능을 구현할 필요가 있습니다. 그럴 경우에는 input box 를 textarea로 변경하시면 됩니다.

<input type="text" id="copy_target" style="position:absolute;top:-9999em;">

이부분을

<textarea id="copy_target" style="position:absolute;top:-9999em;"></textarea>

으로 변경하시면 됩니다.

복사할 문장 자체를 div 에 뿌려줄때 줄바꿈하여 넣으면 따로 처리 안해도 됩니다.

그렇지 않을 경우는 '\r\n' 을 추가해 주시면 개행됩니다.