[javascript] Clipboard.js를 사용하여 웹페이지에서 복사한 내용의 길이 측정하기

30 Nov 2023

javascript

복사 기능은 웹 페이지에서 자주 사용되는 기능 중 하나입니다. 사용자가 내용을 복사하면, 이를 이용하여 글자 수를 확인하거나 특정 조건에 따라 동적으로 처리할 수 있습니다.

이번 글에서는 Clipboard.js를 사용하여 웹페이지에서 복사한 내용의 길이를 측정하는 방법을 알아보겠습니다.

Clipboard.js란?

Clipboard.js는 클립 보드 작업을 쉽게 할 수 있도록 도와주는 라이브러리입니다. 이 라이브러리를 사용하면 브라우저의 클립 보드에 텍스트, 이미지, HTML 등을 복사하고 붙여넣기할 수 있습니다.

실습 준비하기

먼저, Clipboard.js를 다운로드하여 HTML 페이지에 포함해야 합니다. 다음과 같이 <script> 태그를 사용하여 클립 보드 스크립트를 가져올 수 있습니다.

<script src="https://cdnjs.cloudflare.com/ajax/libs/clipboard.js/2.0.8/clipboard.min.js"></script>

그리고 복사 버튼과 길이를 표시할 <span> 태그를 포함하는 HTML 요소가 필요합니다.

<button id="copyButton" data-clipboard-target="#copyTarget">복사</button>

<p id="copyTarget">복사할 내용</p>

<span id="length">0</span> 글자

길이 측정하기

이제 Clipboard.js를 사용하여 복사 버튼을 클릭할 때마다 복사한 내용의 길이를 측정하는 기능을 구현해보겠습니다. JavaScript 코드는 다음과 같습니다.

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

clipboard.on('success', function(e) {
  var length = e.text.length;
  document.getElementById('length').textContent = length;
});

clipboard.on('error', function(e) {
  console.error('Failed to copy: ', e.text);
});

여기서는 ClipboardJS 객체를 생성하고 복사 버튼의 id를 전달하여 이벤트를 할당합니다. 성공적으로 복사가 되면 success 이벤트 핸들러가 호출되며, 복사한 내용의 길이를 계산하여 길이를 표시하는 <span> 요소를 업데이트합니다. 복사에 실패하면 error 이벤트 핸들러가 호출되고 콘솔에 에러 메시지가 출력됩니다.

실행 확인하기

이제 실제로 위의 코드를 HTML 페이지에 추가하고 웹 브라우저에서 확인해보세요. 복사 버튼을 클릭하면 복사한 내용의 길이가 표시되는 것을 확인할 수 있습니다.

참고 자료: