[javascript] Clipboard.js를 사용하여 웹페이지에서 복사 기능 활성화하기
Clipboard.js는 웹페이지에서 복사 기능을 간단하게 활성화할 수 있는 자바스크립트 라이브러리입니다. 이 라이브러리를 사용하면 사용자가 특정 텍스트 또는 요소를 클립보드에 복사할 수 있습니다.
1. Clipboard.js 설치하기
먼저 Clipboard.js를 설치해야 합니다. npm을 사용하여 설치할 수 있습니다.
npm install clipboard
2. Clipboard.js를 웹페이지에 추가하기
다음으로 Clipboard.js를 웹페이지에 추가해야 합니다. 아래와 같이 <script> 태그를 사용하여 라이브러리를 로드할 수 있습니다.
<!DOCTYPE html>
<html>
<head>
<script src="path/to/clipboard.min.js"></script>
</head>
<body>
<!-- 복사 기능을 추가할 요소 -->
<button class="js-copy-button" data-clipboard-text="복사할 텍스트">복사하기</button>
<script>
var clipboard = new ClipboardJS('.js-copy-button');
clipboard.on('success', function(e) {
console.log('복사되었습니다: ' + e.text);
e.clearSelection();
});
clipboard.on('error', function(e) {
console.error('복사에 실패하였습니다.');
});
</script>
</body>
</html>
위 예제에서는 data-clipboard-text 속성을 사용하여 복사할 텍스트를 지정하고, js-copy-button 클래스를 가진 요소를 복사 버튼으로 지정하였습니다.
3. 복사 기능 테스트하기
웹페이지를 실행하고 복사 버튼을 클릭해보세요. 복사되었습니다: {복사된 텍스트}와 같은 메시지가 콘솔에 출력되면 복사가 성공한 것입니다. 실패한 경우에는 복사에 실패하였습니다. 메시지가 출력됩니다.