HTML onpaste 속성은 사용자가 HTML 문서 내 특정 요소에 콘텐츠를 붙여넣는 순간 자동으로 실행되는 이벤트 속성입니다. 주로 입력 필드나 텍스트 영역에서 붙여넣기 동작을 감지해 배경색 변경, 유효성 검사, 알림 표시 등 다양한 동작을 처리할 때 활용됩니다.
문법(Syntax)
onpaste 속성의 기본 문법은 다음과 같습니다.
<tagname onpaste="script"></tagname>
속성값에는 붙여넣기 이벤트가 발생했을 때 실행할 JavaScript 함수나 코드를 지정합니다.
예제(Example)
다음은 HTML onpaste 이벤트 속성을 활용한 실제 예제입니다. 텍스트 영역(textarea)에 콘텐츠를 붙여넣으면 해당 영역의 배경색이 흰색으로 변경됩니다.
<!DOCTYPE html>
<html>
<head>
<style>
body {
color: #000;
height: 100vh;
background: linear-gradient(62deg, #FBAB7E 0%, #F7CE68 100%) no-repeat;
text-align: center;
padding: 20px;
}
p {
border: 2px solid #fff;
padding: 8px;
text-align: justify;
}
textarea {
border: 2px solid #fff;
background: transparent;
font-size: 1rem;
}
::placeholder {
color: #000;
font-size: 1rem;
}
</style>
</head>
<body>
<h1>HTML onpaste Event Attribute Demo</h1>
<p>
I'm a paragraph element with some dummy text.
I'm a paragraph element with some dummy text.
I'm a paragraph element with some dummy text.
I'm a paragraph element with some dummy text.
I'm a paragraph element with some dummy text.
</p>
<textarea placeholder="위 텍스트를 여기에 붙여넣으세요" onpaste="pasteFn()" rows='8' cols="50" required></textarea>
<script>
function pasteFn() {
document.querySelector('textarea').style.background = '#fff';
}
</script>
</body>
</html>실행 결과(Output)
위 코드를 브라우저에서 실행하면 다음과 같은 화면이 나타납니다.
이제 단락(<p>) 안의 텍스트를 복사한 후 텍스트 영역에 붙여넣어 보세요. 붙여넣는 순간 onpaste 이벤트가 발생하여 pasteFn() 함수가 호출되고, 텍스트 영역의 배경색이 흰색으로 바뀌는 것을 확인할 수 있습니다.
참고 사항
onpaste 속성은 대부분의 최신 브라우저에서 지원되며, <input>, <textarea>처럼 편집 가능한 요소뿐 아니라 contenteditable 속성이 적용된 요소에서도 사용할 수 있습니다. 또한 복사와 잘라내기를 감지하는 oncopy, oncut 이벤트 속성과 함께 사용하면 클립보드 관련 사용자 동작을 더욱 폭넓게 제어할 수 있습니다.