그러냐

[Javascript] clipboard.js를 이용해 웹에서 클립보드에 복사하기 본문

javascript

[Javascript] clipboard.js를 이용해 웹에서 클립보드에 복사하기

관절분리 2020. 7. 16. 14:16
반응형

 

 

 

출처 : https://twpower.github.io/81-use-clipboard.js-in-javascript

 

 

 

clipboard.js를 이용해 웹에서 클립보드에 내용을 복사해보자

내용은 공식문서를 참고하여 제작하였습니다.

 

환경 및 선수조건

  • HTML, CSS, Javascript에 대한 기본 이해

 

설치

npm을 통한 설치 or 다운로드를 통해서 설치합니다.

$ npm install clipboard --save

파일 링크 : https://github.com/zenorocha/clipboard.js/archive/master.zip

설치를 하지 않고 html에 cdn을 통한 링크를 이용해서도 사용이 가능합니다:) 즉, 굳이 설치하고 싶지 않으신 분들은 상관이 없습니다.

 

셋업

js파일 첨부

파일이 아니라 cdn을 통해서 링크를 첨부하고 싶다면 아래 방법처럼 사용하면 됩니다. 저는 아래 방법을 사용하였으며 링크는 다음과 같습니다(CDN Link)

<script src="https://cdnjs.cloudflare.com/ajax/libs/clipboard.js/1.7.1/clipboard.min.js"></script>

위에서 받은 파일을 통한 설치는 아래와 같으며(파일의 경로로 해줘야 합니다.)

<script src="dist/clipboard.min.js"></script>

 

Clipboard 객체 생성

자바스크립트 코드 안에 다음 아래 코드처럼 객체를 생성해야합니다.

생성을 할 때 인자로는 이벤트를 발생시키고자 하는 HTML 태그를 DOM selector,HTML element 또는 HTML element들의 list 형태로 넘겨줘야합니다. 아래 예제들은 clipboard.js에 있는 예시들 3개와 제일 아래는 제가 적용한 예제입니다.

class 지정을 통한 예제

<body> <!-- 1. Define some markup --> <button class="btn" data-clipboard-text="1">Copy</button> <button class="btn" data-clipboard-text="2">Copy</button> <button class="btn" data-clipboard-text="3">Copy</button> <!-- 2. Include library --> <script src="https://cdnjs.cloudflare.com/ajax/libs/clipboard.js/1.7.1/clipboard.min.js"></script> <!-- 3. Instantiate clipboard by passing a string selector --> <script> var clipboard = new Clipboard('.btn'); clipboard.on('success', function(e) { console.log(e); }); clipboard.on('error', function(e) { console.log(e); }); </script> </body>

id 지정을 통한 예제

<body> <!-- 1. Define some markup --> <div id="btn" data-clipboard-text="1"> <span>Copy</span> </div> <!-- 2. Include library --> <script src="https://cdnjs.cloudflare.com/ajax/libs/clipboard.js/1.7.1/clipboard.min.js"></script> <!-- 3. Instantiate clipboard by passing a HTML element --> <script> var btn = document.getElementById('btn'); var clipboard = new Clipboard(btn); clipboard.on('success', function(e) { console.log(e); }); clipboard.on('error', function(e) { console.log(e); }); </script> </body>

tag 지정을 통한 예제

<body> <!-- 1. Define some markup --> <button data-clipboard-text="1">Copy</button> <button data-clipboard-text="2">Copy</button> <button data-clipboard-text="3">Copy</button> <!-- 2. Include library --> <script src="https://cdnjs.cloudflare.com/ajax/libs/clipboard.js/1.7.1/clipboard.min.js"></script> <!-- 3. Instantiate clipboard by passing a list of HTML elements --> <script> var btns = document.querySelectorAll('button'); var clipboard = new Clipboard(btns); clipboard.on('success', function(e) { console.log(e); }); clipboard.on('error', function(e) { console.log(e); }); </script> </body>

제 경우에는 웹페이지가 로드될 때 객체를 생성하기 위해서 $(document).ready()안에다가 작성하였습니다.

<script type="text/javascript" language="javascript"> ... $(document).ready(function(){ // 모든 이미지 tag들을 list형태로 가져옴 var imgs = document.querySelectorAll('img'); // 위에서 가져온 list들을 Clipboard 객체를 생성할 때 넘겨줌 var clip = new Clipboard(imgs); // 클립보드에 복사가 완료되었을 때 실행할 이벤트 함수 // 성공시 clip.on('success', function(e) { console.log("Success"); ... }); // 실패시 clipboard.on('error', function(e) { console.log("Error"); ... }); }); ... </script>

 

사용법

1. data-clipboard-target을 통한 사용법

복사하고자하는 값을 가지고 있는 태그에 id를 부여하고 이벤트를 발생시키고 싶은 태그에 data-clipboard-target 속성을 설정하고 거기에 값을 앞에서 설정한 id로 지정을 해줍니다.

<!-- Target --> <input id="foo" value="https://github.com/zenorocha/clipboard.js.git"> <!-- Trigger --> <button class="btn" data-clipboard-target="#foo"> <img src="assets/clippy.svg" alt="Copy to clipboard"> </button>

2. data-clipboard-text을 통한 사용법

복사하고자 하는 태그를 설정할 필요없이 현재 태그에서 이벤트를 발생시키고 값도 복사하고 싶다면 아래처럼 data-clipboard-target를 이벤트를 발생시키고 싶은 태그에 넣어서 사용하시면됩니다.

<!-- Trigger --> <button class="btn" data-clipboard-text="Just because you can doesn't mean you should — clipboard.js"> Copy to clipboard </button>

 

이벤트

위에 이미 예제에서 나와 있었지만 생성한 Clipboard 객체를 사용해서 이벤트를 작성합니다.

// 모든 이미지 tag들을 list형태로 가져옴 var imgs = document.querySelectorAll('img'); // 위에서 가져온 list들을 Clipboard 객체를 생성할 때 넘겨줌 var clip = new Clipboard(imgs); // 클립보드에 복사가 완료되었을 때 실행할 이벤트 함수 // 성공시 clip.on('success', function(e) { console.log("Success"); ... }); // 실패시 clipboard.on('error', function(e) { console.log("Error"); ... });

 

예제코드

https://github.com/TWpower/clipboard.js-example/blob/master/clipboard-js-example.html

<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>clipboard.js simple example</title> <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script> <!--1. clipboard.js 파일 cdn을 통해서 로드--> <script src="https://cdnjs.cloudflare.com/ajax/libs/clipboard.js/1.7.1/clipboard.min.js"></script> <!--2. 스크림트 파일 작성--> <script> // 3. 웹 문서가 로드되면 클립보드 객체 생성 $(document).ready(function(){ var clipboard = new Clipboard('.btn'); clipboard.on('success', function(e) { console.log("Success"); /* 아래 함수를 통해서 블록지정을 없앨 수 있습니다. */ var selection = window.getSelection(); selection.removeAllRanges(); }); clipboard.on('error', function(e) { console.log("Fail"); }); // 아래와 같이 button 태그만 가져오는 방법도 가능하다. /* var btns = document.querySelectorAll('button'); var clipboard = new Clipboard(btns); */ }); </script> </head> <body> <!--data-clipboard-target 예제--> <input id="foo" value="This is Value"> <button class="btn" data-clipboard-target="#foo">data-clipboard-target example</button> <br/> <!--data-clipboard-text 예제--> <button class="btn" data-clipboard-text="data-clipboard-text test">data-clipboard-text example</button> </body> </html>

 

참고자료

 

clipboard.js

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

clipboardjs.com

 

 

잘됨..ㅋㅋ

반응형
저작자표시

'javascript' 카테고리의 다른 글

[ Javascript ] 함수에서 Boolean return 시 undefined일 때  (0) 2021.05.20
array key value 이용한 selectbox option 설정하기  (0) 2020.10.29
구글 지도 API 현재 위치 표시하기  (0) 2020.04.23
에러 Uncaught (in promise) TypeError: Failed to execute 'createObjectURL' on 'URL': No function was found that matched the signature provided.  (0) 2020.04.13
자바스크립트는 어떻게 작동하는가: 메모리 관리 + 4가지 흔한 메모리 누수 대처법  (0) 2019.11.19
'javascript' Related Articles more