[Javascript] clipboard.js - 클립보드로 복사하기

13221 단어 JavaScriptJavaScript

웹 페이지 개발 중 페이지 내 텍스트를 클립보드로 복사하는 기능이 필요할 때,

간단히 가져다 쓸 수 있는 라이브러리를 소개합니다.

추억을 거슬러 가보면... 웹 초창기엔 플래시를 쓰기도 했고, 한동안 화면밖에 textarea를 만들어 텍스트 선택 후 복사시키는 꼼수를 쓰기도 했고, 요새는 클립보드에 직접 접근하는 방법도 있습니다만... 이게 안되는 걸 되게하는 건 아니지만 별거 아닌 간단한 기능 때문에 코드에 시간을 투자하는 것 보단 깔끔하면서 가볍고 이미 검증된 라이브러리를 쓰는게 속 편하거든요. ^^

설치 및 사용:

  1. 사이트에서 소스를 다운 받거나 cdn 서비스에서 제공되는 js 파일을 페이지의 body 하단에 추가합니다.
<script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/clipboard.min.js"></script>
  1. 복사 기능을 담당할 버튼의 선택자를 전달하며 스크립트를 실행합니다.
<script>
new ClipboardJS('.btn');
</script>

위는 각 버튼들에 btn 이라는 클래스가 지정되어 있을 시의 예시입니다.

html 객체나 객체 목록을 직접 전달해도 되고, 선택자를 넣어도 되고, 단수/복수 상관없습니다.

  1. 복사 버튼에 어떤 텍스트를 복사할건지 지정해주면 됩니다.
<!-- 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 하라고 알림을 띄워주면 된답니다.

코드스테이츠 35일차 [ DB실습 ]
백준 1937 욕심쟁이 판다

좋은 웹페이지 즐겨찾기

개발자 우수 사이트 수집

개발자가 알아야 할 필수 사이트 100선 추천 우리는 당신을 위해 100개의 자주 사용하는 개발자 학습 사이트를 정리했습니다
best100-homepage