Clipboard.js는 웹 페이지에서 텍스트를 클립보드에 복사하는 기능을 제공하는 JavaScript 라이브러리입니다. 이 라이브러리를 사용하면 사용자가 웹 페이지의 내용을 간단한 클릭으로 복사할 수 있습니다.

하지만 때때로 사용자가 클립보드에 복사한 내용을 지우는 기능이 필요할 수도 있습니다. 이를 위해 Clipboard.js의 success 이벤트를 활용하여 클립보드에 복사 후, 텍스트를 지우는 방법을 알아보겠습니다.

1. Clipboard.js 설치하기

먼저, Clipboard.js를 설치해야 합니다. 다음의 명령을 사용하여 npm을 통해 설치할 수 있습니다:

npm install clipboard --save

2. HTML 마크업 작성하기

다음은 Clipboard.js를 사용할 HTML 마크업 예제입니다:

<input type="text" value="복사할 텍스트">
<button id="copy-button" data-clipboard-target="#copy-text">복사</button>

input 요소에는 복사할 텍스트가 들어갑니다. button 요소에는 클릭 이벤트를 통해 텍스트를 클립보드에 복사할 수 있도록 설정합니다.

3. JavaScript 코드 작성하기

이제 JavaScript 코드에서 Clipboard.js를 초기화하고 success 이벤트를 처리하여 클립보드에 복사되었을 때 텍스트를 지우도록 설정해보겠습니다:

import ClipboardJS from 'clipboard';

const copyButton = document.getElementById('copy-button');

const clipboard = new ClipboardJS(copyButton);
clipboard.on('success', function(e) {
  const copyInput = document.querySelector('#copy-text');
  copyInput.value = '';
});

위 코드는 copy-button 아이디를 가진 버튼을 클릭했을 때, copy-text 아이디를 가진 input 요소의 값을 지우는 기능을 제공합니다. input 요소의 값을 지우기 위해 value 속성을 빈 문자열로 설정합니다.

결론

Clipboard.js를 사용하여 텍스트를 클립보드에 복사하는 기능을 제공할 때, 사용자가 복사한 내용을 지워야 할 때가 있을 수 있습니다. 이를 위해 Clipboard.js의 success 이벤트를 활용하여 클립보드에 복사 후, 텍스트를 지우는 방법을 알아보았습니다.

참고 자료:

• Clipboard.js 공식 문서