HTML oncopy 이벤트 속성 – 요소 복사 시 자동으로 스크립트 실행하기

HTML oncopy 속성은 사용자가 HTML 문서에서 특정 요소의 콘텐츠를 복사하는 순간 지정된 자바스크립트 코드를 실행하는 이벤트 속성입니다. 사용자가 마우스 오른쪽 버튼 메뉴 또는 Ctrl+C(macOS는 Cmd+C)로 텍스트를 복사하면 해당 이벤트가 트리거됩니다.

문법

oncopy 속성의 기본 문법은 다음과 같습니다.

<tagname oncopy="script"></tagname>

예제

HTML oncopy 이벤트 속성을 활용한 실제 예제를 살펴보겠습니다. 아래 코드에서는 문단(<p>) 요소의 텍스트를 복사하면 페이지 전체 배경색이 하늘색으로 변경되도록 구현했습니다.

<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<style>
    body {
        color: #000;
        height: 100vh;
        background-color: #FBAB7E;
        background-image: linear-gradient(62deg, #FBAB7E 0%, #F7CE68 100%);
        text-align: center;
        padding: 20px;
    }
    p {
        font-size: 1.1rem;
    }
</style>
</head>
<body>
<h1>HTML oncopy Event Attribute Demo</h1>
<p oncopy="get()">I'm a paragraph HTML element with some dummy text.</p>
<p style="color:#db133a;">Now try to copy above paragraph text.</p>
<div class="show"></div>
<script>
    function get() {
        document.body.style.background = "lightblue";
    }
</script>
</body>
</html>

실행 결과

HTML oncopy 이벤트 속성 – 요소 복사 시 자동으로 스크립트 실행하기

위 화면에서 빨간색 안내 문구 아래의 문단 텍스트를 직접 복사해 보세요. oncopy 이벤트가 발생하면서 get() 함수가 호출되고, 페이지 배경색이 하늘색(lightblue)으로 바뀌는 것을 확인할 수 있습니다.

HTML oncopy 이벤트 속성 – 요소 복사 시 자동으로 스크립트 실행하기

참고 사항

oncopy 이벤트는 대부분의 HTML 요소에서 사용할 수 있으며, 동일한 클립보드 계열 이벤트인 oncut(잘라내기) 및 onpaste(붙여넣기)와 함께 활용하면 복사 방지, 사용자 행동 추적 등 다양한 인터랙션을 구현할 수 있습니다.