웹페이지에서 사용자가 텍스트를 복사할 때마다 해당 내용을 기록하고 싶은 경우가 있을 수 있습니다. 이를 위해 Clipboard.js를 사용하여 JavaScript로 구현할 수 있습니다. Clipboard.js는 클립보드 작업을 쉽게 처리할 수 있는 라이브러리입니다.
1. Clipboard.js 라이브러리 추가하기
먼저, Clipboard.js 라이브러리를 HTML 파일에 추가해야 합니다. 다음 코드를 <head> 태그나 <body> 태그 바로 위에 추가하세요.
<script src="https://cdnjs.cloudflare.com/ajax/libs/clipboard.js/2.0.6/clipboard.min.js"></script>
2. 복사 이벤트 리스너 추가하기
이제, Clipboard.js를 사용하여 복사 이벤트가 발생했을 때 기록해야 할 동작을 구현할 수 있습니다. 아래의 JavaScript 코드를 HTML 파일의 <script> 태그 내에 추가하세요.
document.addEventListener('DOMContentLoaded', () => {
const clipboard = new ClipboardJS('.clipboard-button');
clipboard.on('success', (e) => {
const copiedText = e.text;
const timestamp = new Date().toLocaleString();
console.log('복사된 내용:', copiedText);
console.log('복사된 시간:', timestamp);
});
});
위의 코드에서 clipboard-button은 복사 버튼의 클래스 이름을 나타내며, 해당 요소에 복사 이벤트 리스너가 추가됩니다. success 이벤트가 발생했을 때 e 매개변수를 통해 복사된 텍스트를 가져 올 수 있으며, 이를 활용하여 원하는 동작을 구현하면 됩니다. 위의 코드는 콘솔에 복사된 내용과 시간을 출력하는 예시입니다.
3. HTML 구조 변경하기
위의 코드를 사용하려면 HTML 구조를 약간 수정해야합니다. 아래와 같이 복사 버튼을 추가하세요. 복사 버튼 클래스 이름은 앞서 JavaScript 코드에서 사용한 clipboard-button과 동일해야 합니다.
<button class="clipboard-button" data-clipboard-target="#text-to-copy">복사</button>
<div id="text-to-copy">복사할 텍스트 내용</div>
위의 코드에서 data-clipboard-target 속성은 복사할 대상을 지정하는 역할을 합니다. 복사 버튼을 클릭하면 id가 text-to-copy인 요소의 내용이 복사됩니다. 필요에 따라 이 요소를 다른 요소로 수정할 수 있습니다.