[Javascript] 클립보드 Copy 기능

시나리오.

1. Copy 버튼 클릭 시, 현재 URL이 클립보드로 복사 된다.

2. 복사 완료 메시지 출력 후 완료.

 

1. Copy 버튼 클릭 시, 현재 URL이 클립보드로 복사 된다.

* 필수사항

input 또는 textarea 태그가 필요함 (input / textarea 태그 안에 있는 텍스트만 클립보드 복사가 가능함)

input 또는 textarea 태그가 hidden 또는 visibility 이면 안됨

예) input type='hidden' (x)

예) input style='visibility:hidden' (x)

예) textarea style='display:none' (x)

결국, 복사 할 텍스트를 갖고있는 form이 보이는 상태로 있어야 함

 

Copy 할 텍스트가 안보이는 상태로 클립보드 복사를 하고 싶다면?

input 을 보이게 해놓고, css로 화면의 안보이는 곳으로 이동 시키면 됨

예) input style='display:block; position:absolute; left:-10000px'

 

HTML

<input type='text' id='copyText' style='position:absolute; left:-9999px'>

Javascript

/* input 에 현재 URL 삽입 */
var copyText = document.getElementById("copyText");
copyText.value = document.location.href;

/* input 에 드래그 한 것과 같은 효과 */
copyText.focus();
copyText.select();

/* 클립보드에 복사 */
document.execCommand('copy');

/* 완료 안내 */
alert('현재 URL이 클립보드에 복사 되었습니다.');

주의할 것은, 사파리 혹은 브라우저 별로 .select() 만으로는 텍스트 선택이 안되는 문제가 있다.

/* 브라우저 별로 세팅 */
copyText.setSelectionRange(0,9999);

이런 문제로, jQuery를 이용한 클립보드 카피 라이브러리인 clipboard.js 를 사용해도 좋다.

라이브러리를 사용하게 되면, 브라우저별로 신경 쓰지 않아도 돼서 아주 편함

clipboardjs.com/

clipboard.js

<input type="text" id="urlCopy" style="position:absolute; left:-10000px;" />

<span class="btnCopy"  data-original-title="URL복사" data-toggle="tooltip" data-clipboard-target="#url_link">
	<i class="fas fa-link"></i>
</span>

$("#urlCopy").val(document.location.href);
var clipboard = new ClipboardJS('.btnCopy');

clipboard.on('success', function(e) {
    alert("현재 URL이 복사되었습니다.");
    e.clearSelection();
});