[clipboard.js] 버튼 클릭시 텍스트를 클립보드에 복사 스크립트 사용하기

clipboard.js 를 이용해서 클립보드에 특정 텍스트를 저장하는 기능 

 

 

1. clipboard.js 적용하기

https://clipboardjs.com/

clipboard.js

에 접속하여 다운로드 받아 첨부하거나, cdn서비스에서 제공되는 js파일로 추가한다.

<!--clipboard-->
<script src="https://cdn.jsdelivr.net/npm/clipboard@2.0.10/dist/clipboard.min.js"></script>

 

2. 복사기능 실행할 버튼 생성후,

"data-clipboard-text" 이 attr 안에 클립보드에 복사할 내용을 입력합니다.

 

<button class="btn" data-clipboard-text="이곳에 복사할내용을 입력하시면 복사가 됩니다.">복사하기</button>

 

 

3. 스크립트 작성

var clipboard = new ClipboardJS('.btn');

clipboard.on('success', function(e) {
    alert("복사성공!");

    e.clearSelection();
});

clipboard.on('error', function(e) {
	alert("복사실패!");
});

 

하면 완성