본문 바로가기

언어/Javascript

[ Javascript ] ClipboardJS 사용하기

반응형

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를 제공하여, 복사 기능을 웹 페이지에 쉽게 추가할 수 있습니다. 간단한 버튼 클릭만으로 텍스트나 입력 필드의 값을 클립보드로 복사할 수 있으며, 플래시나 추가적인 의존성 없이 브라우저에서 클립보드 기능을 지원합니다.

반응형