웹 페이지 개발 중 페이지 내 텍스트를 클립보드로 복사하는 기능이 필요할 때,
간단히 가져다 쓸 수 있는 라이브러리를 소개합니다.
추억을 거슬러 가보면... 웹 초창기엔 플래시를 쓰기도 했고, 한동안 화면밖에 textarea를 만들어 텍스트 선택 후 복사시키는 꼼수를 쓰기도 했고, 요새는 클립보드에 직접 접근하는 방법도 있습니다만... 이게 안되는 걸 되게하는 건 아니지만 별거 아닌 간단한 기능 때문에 코드에 시간을 투자하는 것 보단 깔끔하면서 가볍고 이미 검증된 라이브러리를 쓰는게 속 편하거든요. ^^
설치 및 사용:
1. 사이트에서 소스를 다운 받거나 cdn 서비스에서 제공되는 js 파일을 페이지의 body 하단에 추가합니다.
<script src="https://cdn.jsdelivr.net/npm/clipboard@2.0.6/dist/clipboard.min.js"></script>2. 복사 기능을 담당할 버튼의 선택자를 전달하며 스크립트를 실행합니다.
<script>
new ClipboardJS('.btn');
</script>위는 각 버튼들에 btn 이라는 클래스가 지정되어 있을 시의 예시입니다.
html 객체나 객체 목록을 직접 전달해도 되고, 선택자를 넣어도 되고, 단수/복수 상관없습니다.
3. 복사 버튼에 어떤 텍스트를 복사할건지 지정해주면 됩니다.
<!-- Target -->
<textarea id="bar">Mussum ipsum cacilds...</textarea>
<!-- Trigger -->
<button class="btn" data-clipboard-action="cut" data-clipboard-target="#bar">
Cut to clipboard
</button>
...
...
...
<!-- Trigger -->
<button class="btn" data-clipboard-text="Just because you can doesn't mean you should — clipboard.js">
Copy to clipboard
</button>기본적인 사용 방법은 크게 두가지인데요,
복사될 텍스트가 들어 있는 input 이나 textarea 의 아이디를 복사 버튼의 data-clipboard-target 속성에 넣어주거나,
input 이나 textarear가 없는 상황이라면 버튼에 직접 data-clipboard-text 의 속성에 복사될 텍스트를 넣어주면 됩니다.
추가로, input 이나 textarea를 사용하는 경우, 버튼의 data-clipboard-action 속성으로 cut을 넣어주면 자르기가 됩니다.
참고용 전체 데모 소스
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>constructor-nodelist</title>
<meta name="viewport" content="width=device-width, initial-scale=1">
</head>
<body>
<!-- 1. 복사를 담당한 버튼들 -->
<button data-clipboard-text="1">Copy</button>
<button data-clipboard-text="2">Copy</button>
<button data-clipboard-text="3">Copy</button>
<!-- 2. js 추가 -->
<script src="../dist/clipboard.min.js"></script>
<!-- 3. 라이브러리 실행 -->
<script>
var btns = document.querySelectorAll('button');
var clipboard = new ClipboardJS(btns);
clipboard.on('success', function(e) {
console.log(e);
});
clipboard.on('error', function(e) {
console.log(e);
});
</script>
</body>
</html>
다운로드 사이트: clipboardjs.com/
clipboard.js
A modern approach to copy text to clipboard. No Flash. No frameworks. Just 3kb gzipped
clipboardjs.com
그 외, 위 사이트를 둘러보시면 하단부에 아래 내용들도 가능하다는걸 보여주는 샘플소스들이 있으니 필요 시 참고하시면 되겠습니다.
- 복사 성공 및 실패 후 실행되는 이벤트 핸들러 (success / error) 예시
- 동적으로 복사 대상을 지정하는 방법
- 동적으로 복사될 텍스트를 전달하는 방법
- 모달창등으로 인해 포커스가 방해받을 때 포커스 유지를 위한 컨테이너 객체 지정방법
- 페이지에서 복사 기능을 깨끗이 제거하는 방법
끝으로, 브라우저도 뭐 거의 다 지원하니 걱정 없고요, 지원하지 않는 옛날 브라우저인 경우엔 error 이벤트 핸들러를 통해 ctrl+c 하라고 알림을 띄워주면 된답니다.
쓰고 싶은데 잘 안 될 시엔 댓글로 문의 남겨 주세요.
이상입니다.
'웹 코딩 > 그 외' 카테고리의 다른 글
| placeholder - 임시 이미지 제공 서비스 (0) | 2020.09.23 |
|---|---|
| 현재 접속자 현황 - whos.amung.us (0) | 2020.09.14 |
| microlight.js - 독특한 단색 코드 강조 (0) | 2020.08.25 |
| pixi.js - 웹에서 쉽게 애니메이션 구현하기 (0) | 2020.08.10 |
| 스크롤 활용도 극강 UP! - 스크롤매직 (ScrollMagic) (0) | 2020.08.07 |
댓글