사이트 : 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 를 검색
'스마트웹앱콘텐츠전문가 > 자바스크립트' 카테고리의 다른 글
| 체크박스 및 라디오 태그 컨트롤 (0) | 2019.05.14 |
|---|---|
| 이미지 에디터 라이브러리 (0) | 2019.05.14 |
| [자바스크립트로 안드로이드 앱 호출] (0) | 2019.04.30 |
| FormData API 소개 주소 (0) | 2019.02.21 |
| [AJAX] beforeSend 및 async (0) | 2019.02.21 |