HTML에서 요소 내용이 복사될 때 스크립트 실행하기

웹 개발을 하다 보면 사용자가 페이지의 텍스트를 복사하는 순간을 감지하고 싶은 경우가 있습니다. 이럴 때 유용하게 쓸 수 있는 것이 바로 HTML의 oncopy 속성입니다.

oncopy 속성이란?

사용자가 요소의 텍스트를 복사하는 순간, HTML의 oncopy 속성에 지정된 자바스크립트 함수가 자동으로 실행(트리거)됩니다. 이를 활용하면 복사 이벤트 발생 시 알림 메시지를 표시하거나, 통계를 기록하는 등 다양한 동작을 구현할 수 있습니다.

oncopy 속성 예제 코드

아래 예제는 입력 필드의 텍스트가 복사되었을 때 화면에 메시지를 출력하는 간단한 코드입니다. 직접 실행해 보면서 동작 방식을 확인해 보세요.

<!DOCTYPE html>
<html>
   <body>
      <input type = "text" oncopy="display()" value = "Copy me">
      <h2 id = "test">Try to copy the above text.</h2>
      <script>
         function display() {
            document.getElementById("test").innerHTML = "Your copied text worked!";
         }
      </script>
   </body>
</html>

코드 동작 원리 설명

위 코드의 핵심 동작 과정은 다음과 같습니다.

1. 입력 필드 생성: <input> 태그에 oncopy="display()" 속성을 추가하여, 해당 필드의 텍스트가 복사되면 display() 함수가 호출되도록 설정합니다.

2. 결과 표시 영역 준비: id="test"를 가진 <h2> 요소가 복사 성공 여부를 알려주는 메시지를 담게 됩니다.

3. 자바스크립트 함수 실행: 사용자가 입력 필드의 텍스트를 복사(Ctrl+C 또는 마우스 우클릭 → 복사)하면 display() 함수가 실행되어, getElementById()로 해당 요소를 찾아 innerHTML 값을 변경합니다.

참고: 관련 이벤트 속성들

oncopy와 함께 자주 사용되는 유사한 이벤트 속성도 알아두면 좋습니다.

- oncut: 사용자가 텍스트를 잘라내기 할 때 실행됩니다.
- onpaste: 사용자가 텍스트를 붙여넣기 할 때 실행됩니다.

HTML에서 요소 내용이 복사될 때 스크립트 실행하기 – oncopy 속성 완벽 가이드

oncopy 속성이란?

oncopy 속성 예제 코드

코드 동작 원리 설명

참고: 관련 이벤트 속성들