clipboard.js를 이용한 Copy 버튼과 Copied! 알림 / HTML, JavaScript

Copy button & Copied! notification using clipboard.js / HTML, JavaScript

 

콘텐츠를 만들 때 자주 쓰는 컬러코드(#6FCF97)를 매번 찾아서 입력하기 번거로웠습니다.
편하게 복붙하기위해 티스토리 "스킨 편집 - html 편집"을 활용, Copy 버튼을 구현해봤습니다.

블로그 좌측 상단 메뉴아이콘을 클릭하면 하단에 아래 모양으로 버튼이 있습니다.

버튼을 클릭하면 컬러코드가 클립보드로 복사되며 Copied! 알림을 볼 수 있습니다.

 

---

 

clipboard.js

clipboard.js 공식 사이트에서 사용방법을 확인할 수 있습니다.

 

clipboard.js는 "클립보드에 복사" 기능을 간편하게 구현할 수 있는 JavaScript package입니다.

npm을 통한 설치를 지원하며 third-party CDN provider에 제공된 스크립트를 HTML에 삽입해서 적용할 수도 있습니다. 저는 5가지 스크립트 중 티스토리가 사용하는 cdnjs를 사용했습니다.

<!-- head 태그 안에 삽입 -->
<script src="https://cdnjs.cloudflare.com/ajax/libs/clipboard.js/2.0.6/clipboard.min.js"></script>

 

소개된 3가지 Usage 중 attribute 값을 복사하는 예제를 사용했습니다. data-clipboard-text에 쓰인 텍스트가 클립보드로 복사됩니다.

<!-- clipboard.js button -->
<button class="clipboard_btn" data-clipboard-text="#6FCF97">
	Color<br>Code
</button>

 

기본 실행 스크립트입니다. 코드 첫번째 줄 '.btn' 대신 지정해둔 class 값을 참조하면 정상적으로 실행됩니다.

<!-- clipboard.js script -->
<script>
	var clipboard = new ClipboardJS('.clipboard_btn');

	clipboard.on('success', function(e) {
		console.info('Action:', e.action);
		console.info('Text:', e.text);
		console.info('Trigger:', e.trigger);
		
		e.clearSelection();
	}	
				);

	clipboard.on('error', function(e) {
		console.error('Action:', e.action);
		console.error('Trigger:', e.trigger);
	}
				);						
</script>

 

 

---

 

Copied!

 

구현해보니 콘솔창에만 성공/실패가 뜨기 때문에 ctrl + v 를 눌러봐야만 복사가 되었는지 알 수 있어서 답답했습니다. 밋밋한 디자인도 어울리게 바꿔야 했습니다.

기존 버튼은 CSS를 적용하기 위해 div 태그로 묶었습니다.
그 밑에 "Copied!" 알림을 위한 공간을 div 태그로 만들고 class를 지정해줬습니다.

<!-- clipboard.js button -->
<div class="box_colorcode">
	<button class="clipboard_btn" data-clipboard-text="#6FCF97">
		Color<br>Code
	</button>
</div>

<div class="box_colorcode_copied">
</div>

 

clipboard.js의 기본 실행 스크립트는

- 성공시 발생하는 이벤트
- 실패시 발생하는 이벤트

로 구성되어 있습니다. 

document.querySelector를 이용해 만들어둔 2번째 div 태그를 선택한 다음
document.createElement를 이용해 "Copied!" 알림을 구현합니다. setTimeout으로 1.5초가 지나면 생성되었던 span 요소를 ""으로 바꿔 없어지게 합니다.
실패시엔 간단히 "error" alert를 띄웁니다.

<!-- clipboard.js script -->
<script>
	var clipboard = new ClipboardJS('.clipboard_btn');
	
	var boxColorcodeCopied = document.querySelector('.box_colorcode_copied')
	var spanElem = document.createElement('span');
						
	clipboard.on('success', function(e) {
		console.info('Action:', e.action);
		console.info('Text:', e.text);
		console.info('Trigger:', e.trigger);
		
		spanElem.innerHTML = 'Copied!';
		boxColorcodeCopied.appendChild(spanElem);
		setTimeout(function () {spanElem.innerHTML = "";} , 1500);
		
		e.clearSelection();
	}	
							);

	clipboard.on('error', function(e) {
		console.error('Action:', e.action);
		console.error('Trigger:', e.trigger);
		
		alert("error");
	}
							);						
</script>

 

 

잘 동작하는지 확인한 다음 CSS를 적용해 기존 메뉴 요소들과 어울리도록 만들어 마무리했습니다.

 

---

 

여기에서 CSS를 제외한 소스코드를 볼 수 있습니다.