웹 개발을 하다 보면 사용자가 텍스트나 콘텐츠를 복사하는 시점을 감지해야 하는 경우가 종종 있습니다. 사용자가 요소의 내용을 클립보드로 복사하면 oncopy 이벤트가 발생합니다. 이 이벤트를 활용하면 복사 동작이 일어날 때 알림을 표시하거나, 통계를 기록하거나, 원하는 로직을 실행할 수 있습니다.
oncopy 이벤트 기본 예제
다음 코드를 실행하면 JavaScript에서 oncopy 이벤트를 구현하는 방법을 직접 확인할 수 있습니다.
<!DOCTYPE html>
<html>
<body>
<input type = "text" oncopy = "copyFunction()" value = "이 텍스트를 복사해 보세요">
<script>
function copyFunction() {
document.write("Text copied!");
}
</script>
</body>
</html>위 예제에서는 입력 필드의 텍스트를 복사(Ctrl+C 또는 우클릭 후 복사)하면 copyFunction() 함수가 호출되어 "Text copied!"라는 메시지가 화면에 출력됩니다.
addEventListener로 구현하기
HTML 속성 대신 addEventListener 메서드를 사용하면 더 유연하게 이벤트를 처리할 수 있습니다.
document.querySelector("input").addEventListener("copy", function() {
alert("텍스트가 복사되었습니다!");
});함께 알아두면 좋은 관련 이벤트
- oncopy: 사용자가 내용을 복사할 때 발생합니다.
- oncut: 사용자가 내용을 잘라내기 할 때 발생합니다.
- onpaste: 사용자가 내용을 붙여넣기 할 때 발생합니다.
이 세 가지 이벤트는 모두 클립보드와 관련된 작업을 감지하며, 필요에 따라 조합하여 활용하면 사용자 상호작용을 더욱 정교하게 제어할 수 있습니다.