클립보드 복사 라이브러리

날짜:

clipboard.js
A modern approach to copy text to clipboard. No Flash. No frameworks. Just 3kb gzipped
clipboardjs.com
불러오는 중입니다...
사용 전제)

head 안에 script 라이브러리 사용 추가
방법1. CDN 사용
- jsDelivr : https://cdn.jsdelivr.net/npm/clipboard@2/dist/clipboard.min.js
- cdnjs :  https://cdnjs.cloudflare.com/ajax/libs/clipboard.js/2.0.0/clipboard.min.js
- unpkg : https://unpkg.com/clipboard@2/dist/clipboard.min.js
방법2. 라이브러리를 직접 다운로드 하여 로컬 경로 선언

사용) ※클립보드 대상이 되는 target, action, text 가 존재 해야 함을 명심!!!

(action의 종류
- copy : 단순하게 copy
- cut : 복사한 후 복사한 것을 cut해 버림(※ input태그 또는 textarea 태그에서만 사용 가능)
)

스크립트 구문 내에서 new ClipboardJS('html 요소 선택자') 선언
(예시 :
<body>
<!-- Target -->
<input id="foo" data-clipboard-text="Copy!">
<!-- Trigger -->
<button class="btn" data-clipboard-action="copy" data-clipboard-target="#foo">클립 보드복사</button>
</body>
<script>
var clipboard = new ClipboardJS('.btn');

clipboard.on('success', function(e){

 console.info('Action : ', e.action); //copy
 console.info('Text: ', e.text); //Copy!
 console.info('Trigger: ', e.trigger); //클래스명이 btn인 객체
 
 e.clearSelection();

});

clipboard.on('error', function(e){
 console.info('Action : ', e.action);
 console.info('Trigger: ', e.trigger);

});

</script>​


+ 보다 고급진 사용을 원한다면,
   https://clipboardjs.com/ 링크에서 Advanced Usage 를 검색

댓글

댓글 쓰기