ClipboardJS는 자바스크립트 라이브러리로, 브라우저에서 클립보드 기능을 쉽게 사용할 수 있게 도와줍니다. 즉, 사용자가 웹 페이지의 텍스트나 값을 복사하기 위해 Ctrl+C
나 마우스 오른쪽 클릭 없이도, 버튼 클릭만으로 클립보드에 값을 복사할 수 있도록 해주는 라이브러리입니다.
이 라이브러리는 플래시(Flash) 같은 외부 의존성을 사용하지 않고, 자바스크립트만으로 클립보드 복사를 처리하므로 매우 가볍고 사용하기 쉬운 것이 특징입니다. 주로 복사 버튼을 제공하고 싶을 때 사용되며, 간단한 API로 개발자들이 손쉽게 기능을 구현할 수 있습니다.
1. ClipboardJS의 주요 기능
- 텍스트 복사: 지정된 텍스트나 HTML 요소의 값을 클립보드에 복사할 수 있습니다.
- 입력 필드 복사: 입력 필드의 값을 복사할 수 있습니다.
- 플래시 없이 작동: 순수 자바스크립트를 사용하여 클립보드 기능을 구현하므로, 추가적인 의존성 없이 작동합니다.
- 간단한 사용법: 설정과 사용이 매우 간단하며, 버튼을 클릭했을 때 복사 기능을 수행하도록 할 수 있습니다.
2. ClipboardJS 설치 및 사용법
1. CDN을 이용한 설치
ClipboardJS는 CDN을 통해 간단히 웹 페이지에 추가할 수 있습니다. 다음과 같이 스크립트를 HTML 문서에 추가합니다.
<script src="https://cdnjs.cloudflare.com/ajax/libs/clipboard.js/2.0.11/clipboard.min.js"></script>
2. 복사 버튼 구현하기
간단한 복사 버튼을 만들 수 있습니다. 복사할 내용을 포함한 요소와 복사 버튼을 설정하고, ClipboardJS를 초기화하면 됩니다.
예제 1: 텍스트 복사하기
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>ClipboardJS Example</title>
<script src="https://cdnjs.cloudflare.com/ajax/libs/clipboard.js/2.0.11/clipboard.min.js"></script>
</head>
<body>
<!-- 복사할 텍스트를 보여주는 요소 -->
<p id="textToCopy">Hello, ClipboardJS!</p>
<!-- 복사 버튼 -->
<button class="btn" data-clipboard-target="#textToCopy">Copy Text</button>
<script>
// ClipboardJS 초기화
var clipboard = new ClipboardJS('.btn');
// 복사가 성공했을 때 실행될 콜백 함수
clipboard.on('success', function(e) {
console.log(e);
alert('Text copied: ' + e.text);
});
// 복사가 실패했을 때 실행될 콜백 함수
clipboard.on('error', function(e) {
console.log(e);
alert('Failed to copy');
});
</script>
</body>
</html>
설명:
data-clipboard-target="#textToCopy"
: 버튼을 클릭했을 때 복사할 텍스트가 있는 요소를 지정합니다. 이 경우#textToCopy
는 복사할 텍스트가 들어 있는<p>
태그입니다.ClipboardJS('.btn')
:class="btn"
이 적용된 요소에 대해 ClipboardJS를 초기화합니다.clipboard.on('success', function(e))
: 복사가 성공했을 때 실행되는 이벤트 핸들러입니다.e.text
를 통해 복사된 내용을 확인할 수 있습니다.
예제 2: 입력 필드 복사하기
입력 필드의 내용을 복사할 수도 있습니다.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>ClipboardJS Input Example</title>
<script src="https://cdnjs.cloudflare.com/ajax/libs/clipboard.js/2.0.11/clipboard.min.js"></script>
</head>
<body>
<!-- 복사할 텍스트 입력 필드 -->
<input type="text" value="Copy this text" id="inputToCopy">
<!-- 복사 버튼 -->
<button class="btn" data-clipboard-target="#inputToCopy">Copy Input Text</button>
<script>
// ClipboardJS 초기화
var clipboard = new ClipboardJS('.btn');
clipboard.on('success', function(e) {
console.log(e);
alert('Input text copied: ' + e.text);
});
clipboard.on('error', function(e) {
console.log(e);
alert('Failed to copy');
});
</script>
</body>
</html>
설명:
- 이 예제에서는
<input>
요소에 있는 값을 복사합니다. 마찬가지로data-clipboard-target
속성으로 복사할 입력 필드를 지정합니다.
3. 버튼 클릭 시 특정 텍스트 복사
ClipboardJS는 data-clipboard-target
을 사용하지 않고, 자바스크립트로 직접 값을 복사할 수도 있습니다. 이를 통해 복사할 값을 동적으로 설정할 수 있습니다.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>ClipboardJS with Dynamic Text</title>
<script src="https://cdnjs.cloudflare.com/ajax/libs/clipboard.js/2.0.11/clipboard.min.js"></script>
</head>
<body>
<!-- 복사 버튼 -->
<button id="dynamicBtn">Copy Dynamic Text</button>
<script>
// ClipboardJS 초기화
var clipboard = new ClipboardJS('#dynamicBtn', {
text: function() {
return "This is dynamically set text!";
}
});
clipboard.on('success', function(e) {
console.log(e);
alert('Dynamic text copied: ' + e.text);
});
clipboard.on('error', function(e) {
console.log(e);
alert('Failed to copy');
});
</script>
</body>
</html>
설명:
- 이 예제에서는
text
옵션을 통해 동적으로 복사할 텍스트를 지정할 수 있습니다. ClipboardJS('#dynamicBtn', { text: function() { return "This is dynamically set text!"; } })
처럼 텍스트를 동적으로 지정할 수 있습니다.
4. ClipboardJS의 주요 메서드
clipboard.on('success', callback)
: 복사가 성공했을 때 실행될 콜백 함수를 정의합니다.clipboard.on('error', callback)
: 복사 실패 시 실행될 콜백 함수를 정의합니다.
5. 브라우저 호환성
ClipboardJS는 대부분의 최신 브라우저에서 잘 동작합니다. 단, 일부 오래된 브라우저에서는 클립보드 접근이 지원되지 않을 수 있습니다.
6. 결론
ClipboardJS는 매우 간단하고 직관적인 API를 제공하여, 복사 기능을 웹 페이지에 쉽게 추가할 수 있습니다. 간단한 버튼 클릭만으로 텍스트나 입력 필드의 값을 클립보드로 복사할 수 있으며, 플래시나 추가적인 의존성 없이 브라우저에서 클립보드 기능을 지원합니다.
'언어 > Javascript' 카테고리의 다른 글
[ Javascript ] Highlight.js 사용하기 (0) | 2024.10.03 |
---|---|
[ JavaScript ] array 배열 사용하기 (0) | 2024.09.23 |
[ JavaScript ] null 의미와 사용방법 알아보기 (1) | 2024.09.05 |
[ JavaScript ] var, let, const 변수 선언하기 (0) | 2024.09.05 |
[ JavaScript ] Visual Code에서 바로 실행해 보자. (0) | 2024.06.17 |