[JavaScript] 자바 스크립트 클립보드 복사 구현하기

2022-11-25

---

Photo by Philip Oroni on Unsplash

---

0. 사용 라이브러리

 

https://clipboardjs.com/

clipboard.js

 

우리가 사용할 라이브러리는  clipboard.js 이며 이를 cdn 으로 불러와서 클립보든 복사 기능을 구현할 예정이다.

---

1. 스크립트 코드

 

<!-- clipboard.min.js 영역 -->
<script src="https://cdn.jsdelivr.net/npm/clipboard@2.0.10/dist/clipboard.min.js"></script>
<script type="text/javascript">	
	var clipboard = new ClipboardJS('.clipboardMinBtn');
	
	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>
<!--  -->

 

스크립트 코드이며, class 선택자에 따라 동작하게 만들었다.

---

2. html 코드

 

<div class="">
	<textarea class="" id="test1" placeholder="Leave a comment here" style="height: 100px">test 입니다.</textarea>
</div>
<br>
<button class="clipboardMinBtn" data-clipboard-action="copy" data-clipboard-target="#test1">copy</button><!--clipboard.min.js 호출버튼  -->

 

여기서 data-clipboard-action 부분은 복사할지 자를지에 대한 선택이며, 자르기 옵션은 cut 을 적어주면 된다. data-clipboard-target은 복사할 내용이 있는 태그의 아이디 값을 넣어주면 된다.

---

메인 이미지 출처 : Photo by Philip Oroni on Unsplash