스마트웹앱콘텐츠전문가/자바스크립트

클립보드 복사 라이브러리

9D4U 2019. 5. 14. 16:55
728x90
반응형

사이트 : https://clipboardjs.com/

 

clipboard.js

A modern approach to copy text to clipboard. No Flash. No frameworks. Just 3kb gzipped

clipboardjs.com

라이브러리 다운로드 경로 : https://github.com/zenorocha/clipboard.js/archive/master.zip

불러오는 중입니다...

사용 전제)

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 를 검색

728x90