[javascript] Clipboard.js를 사용하여 복사한 내용의 길이 제한하기

30 Nov 2023

javascript

이번에는 Clipboard.js 라이브러리를 사용하여 복사한 내용의 길이를 제한하는 방법에 대해 알아보겠습니다. Clipboard.js는 클립보드에 텍스트를 복사하기 위해 사용되는 JavaScript 라이브러리입니다. 이를 사용하여 복사한 텍스트의 길이를 제한하는 방법을 다루겠습니다.

Clipboard.js란?

Clipboard.js는 클립보드에 텍스트를 복사하는 동작을 쉽게 처리할 수 있도록 도와주는 라이브러리입니다. 복사 동작은 사용자가 버튼을 클릭하거나 특정 이벤트가 발생했을 때 텍스트를 클립보드에 복사하는 것을 의미합니다. Clipboard.js는 이러한 복사 동작을 간단하게 구현할 수 있도록 도와줍니다.

복사한 내용의 길이 제한하기

Clipboard.js를 사용하여 복사한 내용의 길이를 제한하기 위해서는 다음과 같은 절차를 따릅니다.

Clipboard.js를 프로젝트에 추가합니다. HTML 파일의 <head> 태그 안에 다음과 같이 스크립트를 추가합니다.

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

텍스트를 복사할 요소를 선택합니다. 예를 들어, 아래와 같이 버튼 요소를 선택합니다.

<button id="copyButton" data-clipboard-target="#copyText">Copy</button>

Clipboard.js 초기화 코드를 작성합니다. 아래의 스크립트를 마지막 <body> 태그 직전에 추가합니다.

<script>
// Clipboard.js 초기화 코드
var clipboard = new ClipboardJS('#copyButton');

// 복사 성공 시 동작을 정의합니다.
clipboard.on('success', function(e) {
    // 복사한 내용의 길이가 10을 초과하는 경우, 복사 내용을 10글자로 제한합니다.
    if (e.text.length > 10) {
        e.clearSelection();  // 클립보드 선택 해제
        e.text = e.text.substring(0, 10);  // 길이 제한
        e.trigger.innerHTML = "Copied (Limited)";  // 버튼 텍스트 변경
    }
});

// 복사 실패 시 동작을 정의합니다.
clipboard.on('error', function(e) {
    console.error('Action:', e.action);
    console.error('Trigger:', e.trigger);
});

</script>

위의 코드에서 #copyButton은 복사 버튼의 id를, #copyText는 실제로 복사할 텍스트를 가지고 있는 요소(demo 예제에서는 텍스트를 가지고 있는 <textarea> 요소)의 id를 나타냅니다.

복사 동작을 테스트합니다. Copy 버튼을 클릭하여 텍스트를 복사해 보면, 복사한 내용이 10글자 이상인 경우, 복사한 내용이 10글자로 제한되는 것을 확인할 수 있습니다.

결론

이번 글에서는 Clipboard.js를 사용하여 복사한 내용의 길이를 제한하는 방법을 알아보았습니다. Clipboard.js는 간단한 스크립트로 클립보드에 텍스트를 쉽게 복사할 수 있도록 도와줍니다. 특히, 텍스트의 길이를 제한하는 기능을 추가하여 원하는 형식으로 텍스트를 제한적으로 복사할 수 있습니다.