HTML DOM의 클립보드(Clipboard) 이벤트는 사용자가 클립보드를 수정할 때 발생하는 동작에 대한 정보를 제공합니다. 클립보드 이벤트에는 cut(잘라내기), copy(복사), paste(붙여넣기) 세 가지가 있으며, 이를 활용하면 사용자에게 클립보드가 어떻게 변경되고 있는지 알려줌으로써 사이트의 접근성과 사용자 경험을 크게 향상시킬 수 있습니다.
클립보드 이벤트의 속성(Property)
클립보드 이벤트에서 사용할 수 있는 주요 속성은 다음과 같습니다.
| 속성 | 설명 |
|---|---|
| clipboardData | 클립보드 작업(잘라내기, 복사 또는 붙여넣기)의 영향을 받은 데이터를 담고 있는 객체를 반환합니다. |
클립보드 이벤트 종류
클립보드 이벤트에 속한 이벤트 타입은 다음과 같습니다.
| 이벤트 | 설명 |
|---|---|
| oncopy | 사용자가 요소의 내용을 복사했을 때 발생합니다. |
| oncut | 사용자가 요소의 내용을 잘라냈을 때 발생합니다. |
| onpaste | 사용자가 요소에 내용을 붙여넣었을 때 발생합니다. |
문법(Syntax)
클립보드 이벤트 객체는 다음과 같은 문법으로 생성할 수 있습니다.
var clipboardEvent = new ClipboardEvent(type,[options]);
여기서 type은 'cut', 'copy', 'paste' 중 하나이며, 두 번째 매개변수인 options는 선택 사항입니다. 옵션 객체에는 clipboardData, dataType, data 등의 값을 지정할 수 있습니다.
예제: oncopy 이벤트 활용하기
클립보드 이벤트 중 하나인 oncopy 이벤트의 실제 사용 예제를 살펴보겠습니다.
<!DOCTYPE html>
<html>
<body>
<form>
<label> TEXTBOX <input type="text" oncopy="CopyText()" value="Copy this text">
</label>
</form>
<p id="Sample"></p>
<script>
function CopyText() {
document.getElementById("Sample").innerHTML = "The text has been copied by you!"
}
</script>
</body>
</html>실행 결과
위 코드를 실행하면 텍스트 입력창이 화면에 나타납니다.
입력창 안의 텍스트를 복사하면 아래와 같이 메시지가 표시됩니다.
예제 코드 분석
위 예제의 동작 원리를 단계별로 살펴보겠습니다.
먼저, <input> 요소를 type="text"로 생성하고 라벨 'TEXTBOX'를 붙였습니다. 입력창에는 사용자가 선택할 수 있도록 기본 텍스트가 미리 들어가 있습니다. 사용자가 이 텍스트를 복사하는 순간 CopyText() 함수가 실행됩니다.
<label> TEXTBOX <input type="text" oncopy="CopyText()" value="Copy this text">
CopyText() 함수는 document 객체의 getElementById() 메서드를 사용해 <p> 요소를 가져온 뒤, 해당 문단 안에 "The text has been copied by you!"라는 메시지를 출력합니다.
function CopyText() {
document.getElementById("Sample").innerHTML = "The text has been copied by you!"
}이처럼 클립보드 이벤트를 활용하면 사용자가 복사, 잘라내기, 붙여넣기 작업을 수행할 때 즉각적인 피드백을 제공하거나, 복사된 데이터를 검증·가공하는 등 다양한 인터랙션을 구현할 수 있습니다.