[Javascript] clipboard.js를 이용해 웹에서 클립보드에 복사하기
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.6.4/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>