[javascript] Clipboard.js를 사용하여 웹 페이지에서 텍스트 복사하기

30 Nov 2023

javascript

개요

웹 페이지에서 사용자가 특정 텍스트를 클릭하면 해당 텍스트를 클립보드에 복사하는 기능은 매우 유용합니다. 이 기능을 구현하기 위해 Clipboard.js라는 라이브러리를 사용할 수 있습니다. Clipboard.js는 클립보드 작업을 쉽게 처리할 수 있도록 도와주는 라이브러리입니다. 이번 글에서는 Clipboard.js를 사용하여 웹 페이지에서 텍스트를 복사하는 방법에 대해 알아보겠습니다.

Clipboard.js 설치

Clipboard.js를 사용하기 위해 먼저 해당 라이브러리를 다운로드 받아야 합니다. 다음과 같이 <head> 태그 안에 아래 스크립트를 추가하여 Clipboard.js를 설치합니다.

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

텍스트 복사 버튼 추가

먼저 텍스트 복사 버튼을 웹 페이지에 추가해야 합니다. 이 버튼을 클릭하면 해당 텍스트가 클립보드에 복사될 수 있도록 구현해야 합니다. 다음과 같이 텍스트 복사 버튼을 추가합니다.

<button class="btn" data-clipboard-target="#myText">텍스트 복사하기</button>

위의 예제에서 data-clipboard-target 속성은 복사할 대상 텍스트의 ID를 지정합니다. #myText는 해당 텍스트를 찾는 식별자입니다. 이 식별자는 복사 버튼이 클릭되었을 때, 지정된 텍스트가 복사될 대상을 나타냅니다.

Clipboard.js 초기화

텍스트 복사 버튼을 추가한 후에는 Clipboard.js를 초기화해야 합니다. 다음과 같이 스크립트를 추가하여 Clipboard.js를 초기화합니다.

<script>
  var clipboard = new ClipboardJS('.btn');
</script>

위의 예제에서 .btn은 텍스트 복사 버튼의 클래스 이름을 나타냅니다. 이 클래스 이름은 Clipboard.js가 복사 버튼을 찾을 때 사용됩니다.

텍스트 복사 이벤트 처리

이제 Clipboard.js를 이용하여 텍스트 복사 이벤트를 처리하는 코드를 작성해야 합니다. 다음과 같이 Clipboard.js의 success 이벤트 리스너를 추가합니다.

<script>
  clipboard.on('success', function(e) {
    console.log('텍스트 복사됨:', e.text);
    e.clearSelection();
  });
</script>

위의 예제에서 e.text는 성공적으로 복사된 텍스트를 나타냅니다. 이를 이용하여 원하는 동작을 수행할 수 있습니다. 예를 들어, 복사 성공 메시지를 표시하거나, 특정 동작을 수행할 수 있습니다.

결과 확인

위의 코드를 모두 작성하고 웹 페이지를 실행하면 텍스트 복사 버튼을 클릭하면 해당 텍스트가 클립보드에 복사됩니다. 콘솔에는 성공적으로 복사된 텍스트가 출력됩니다.

결론

Clipboard.js를 사용하여 웹 페이지에서 텍스트를 복사하는 기능을 구현하는 방법에 대해 알아보았습니다. Clipboard.js는 간단한 사용법과 높은 호환성을 제공하여 텍스트 복사 기능을 쉽게 구현할 수 있도록 도와줍니다.