[javascript] Clipboard.js를 사용하여 웹페이지에서 복사한 내용을 서버로 전송하기

30 Nov 2023

javascript

개요

웹페이지에서 사용자가 복사한 내용을 서버로 전송하여 저장하려면 Clipboard.js를 사용할 수 있습니다. Clipboard.js는 클립보드에 텍스트를 복사하고 붙여넣기하는 기능을 지원하는 JavaScript 라이브러리입니다. 이 라이브러리를 사용하면 사용자가 복사한 내용을 간편하게 서버로 전송할 수 있습니다.

설치하기

Clipboard.js는 CDN을 통해 사용할 수 있습니다. 아래의 코드를 HTML 파일의 <head> 태그 안에 추가하여 Clipboard.js를 가져옵니다.

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

사용 방법

HTML 코드에서 복사 버튼을 만듭니다. 복사 버튼은 사용자가 복사하기를 원하는 내용에 부여해야 합니다. 예를 들어, 복사할 텍스트를 감싸는 <div> 태그에 id를 추가합니다.

<div id="copyContainer">
    복사할 텍스트
</div>
<button id="copyButton" data-clipboard-target="#copyContainer">
    복사하기
</button>

JavaScript 코드에서 Clipboard.js를 초기화하고 복사 버튼을 클릭했을 때 복사가 발생하도록 설정합니다.

var clipboard = new ClipboardJS('#copyButton');

clipboard.on('success', function(e) {
    console.log(e);
    // 복사 성공 시 서버로 전송하는 로직을 추가하세요.
});

clipboard.on('error', function(e) {
    console.log(e);
    // 복사 실패 시에 대한 예외 처리 코드를 추가하세요.
});

복사가 성공했을 때 서버로 전송하는 로직을 추가합니다. success 이벤트 핸들러에서 서버로 AJAX 요청을 보내거나, 폼 데이터를 서버로 제출하는 등의 방법을 사용하여 복사한 내용을 서버에 저장할 수 있습니다.

예제 코드

아래의 예제 코드를 참고하여 Clipboard.js를 사용하여 웹페이지에서 복사한 내용을 서버로 전송할 수 있습니다.

<!DOCTYPE html>
<html>
<head>
    <title>Clipboard.js 예제</title>
    <script src="https://cdn.jsdelivr.net/npm/clipboard@2.0.8/dist/clipboard.min.js"></script>
</head>
<body>
    <div id="copyContainer">
        복사할 텍스트
    </div>
    <button id="copyButton" data-clipboard-target="#copyContainer">
        복사하기
    </button>

    <script>
        var clipboard = new ClipboardJS('#copyButton');

        clipboard.on('success', function(e) {
            console.log(e);
            // 서버로 전송하는 로직을 추가하세요.
        });

        clipboard.on('error', function(e) {
            console.log(e);
            // 예외 처리 코드를 추가하세요.
        });
    </script>
</body>
</html>

결론

Clipboard.js를 사용하면 웹페이지에서 복사한 내용을 쉽게 서버로 전송할 수 있습니다. 위의 예제 코드를 참고하여 Clipboard.js를 사용해보세요!

참고 자료

Clipboard.js 공식 문서: https://clipboardjs.com/