[javascript] Clipboard.js를 사용하여 웹페이지에서 특정 요소 복사하기

30 Nov 2023

javascript

웹페이지에서 특정 요소를 클립보드로 복사하려면 Clipboard.js 라이브러리를 사용할 수 있습니다. 이 라이브러리는 클립보드에 텍스트나 HTML을 복사하는 기능을 제공하여 사용자가 원하는 텍스트를 간편하게 복사할 수 있게 도와줍니다.

1. Clipboard.js 라이브러리 설치하기

먼저, Clipboard.js 라이브러리를 설치해야 합니다. 이를 위해서는 npm을 사용하거나, CDN을 통해 라이브러리를 로드할 수 있습니다. 아래는 CDN을 통해 라이브러리를 로드하는 예시입니다.

<script src="https://cdn.jsdelivr.net/npm/clipboard@2.0.8/dist/clipboard.min.js"></script>

2. 특정 요소에서 클릭 이벤트 등록하기

클립보드로 복사할 특정 요소에 클릭 이벤트를 등록해야 합니다. 이 예시에서는 “copy-button”이라는 ID를 가진 버튼 요소를 사용합니다.

<button id="copy-button">클릭하여 복사</button>

3. Clipboard.js 초기화하기

아래의 코드를 사용하여 Clipboard.js를 초기화합니다. init() 함수는 클릭 이벤트 발생 시 해당 요소의 텍스트를 클립보드에 복사합니다.

<script>
  var clipboard = new ClipboardJS('#copy-button', {
    text: function() {
      return document.querySelector('특정 요소 선택자').textContent;
    }
  });
  
  clipboard.on('success', function(e) {
    console.log('복사 완료');
    e.clearSelection();
  });
  
  clipboard.on('error', function(e) {
    console.error('복사 실패');
  });
</script>

4. 특정 요소 선택자 변경하기

위의 코드에서 “특정 요소 선택자”를 실제로 복사할 요소를 찾는 선택자로 변경해야 합니다. 이를 위해서는 해당 요소의 ID나 클래스 등의 식별자를 사용하거나, querySelector 함수를 통해 요소를 선택할 수 있습니다.

예를 들어, 복사할 요소가 <div id="copy-target">복사할 텍스트</div>와 같이 ID로 식별되는 경우, 아래와 같이 코드를 변경합니다.

return document.querySelector('#copy-target').textContent;

참고 자료

Clipboard.js 공식 문서: https://clipboardjs.com/
Clipboard.js GitHub 저장소: https://github.com/zenorocha/clipboard.js