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

30 Nov 2023

javascript

이번 포스트에서는 Clipboard.js 라이브러리를 사용하여 웹페이지에서 복사한 내용을 읽기 전용으로 설정하는 방법에 대해 알아보겠습니다.

Clipboard.js란?

Clipboard.js는 웹페이지에서 텍스트, 이미지 또는 HTML 요소를 클립보드에 복사할 수 있는 자바스크립트 라이브러리입니다. 이 라이브러리는 간단한 API를 제공하여 복사 기능을 쉽게 구현할 수 있도록 도와줍니다.

읽기 전용 설정하기

우선, Clipboard.js를 다운로드하여 웹페이지에 추가합니다. 다음은 기본적인 HTML 구조입니다.

<body>
  <input type="text" id="copyInput" value="Hello, World!" readonly>
  <button id="copyButton">Copy</button>
</body>

위 예제에서는 읽기 전용인 input 요소와 복사 버튼이 있는 간단한 페이지입니다. input 요소의 readonly 속성을 이용하여 읽기 전용으로 설정했습니다.

다음으로, Clipboard.js를 초기화하여 복사 버튼에 복사 이벤트를 추가합니다. 자바스크립트 코드는 다음과 같습니다.

const copyButton = document.getElementById("copyButton");
const copyInput = document.getElementById("copyInput");

const clipboard = new ClipboardJS(copyButton, {
  text: function() {
    return copyInput.value;
  }
});

clipboard.on("success", function() {
  console.log("Copied to clipboard");
});

clipboard.on("error", function() {
  console.log("Failed to copy");
});

위 코드에서는 copyButton과 copyInput 요소를 가져와서 Clipboard.js에 전달합니다. text 함수를 사용하여 복사할 내용을 지정합니다. 이 경우, copyInput 요소의 값을 반환하도록 설정했습니다.

마지막으로, 복사 이벤트가 성공하거나 실패했을 때 실행할 콜백 함수를 정의합니다. 위 코드에서는 성공 시 “Copied to clipboard”, 실패 시 “Failed to copy” 메시지를 콘솔에 출력하도록 설정했습니다.

결과 확인하기

이제 웹페이지를 열고 복사 버튼을 클릭해보세요. copyInput 요소의 값이 복사되며, 클립보드에 저장됩니다. 또한, copyInput 요소가 읽기 전용이기 때문에 사용자는 내용을 수정할 수 없습니다.

결론

Clipboard.js를 사용하면 웹페이지에서 복사한 내용을 읽기 전용으로 설정할 수 있습니다. 이를 활용하면 사용자가 편집할 수 없는 내용을 복사하여 다른 곳에 사용할 수 있습니다.

더 자세한 내용은 Clipboard.js 공식 문서를 참조하세요.