요소에 콘텐츠를 붙여넣을 때 onpaste 이벤트가 발생합니다. 사용자가 입력 필드나 편집 가능한 영역에 텍스트를 붙여넣는 순간 이 이벤트가 트리거되므로, 붙여넣기 동작을 감지하거나 필요에 따라 제어할 수 있습니다.
onpaste 이벤트는 주로 <input>, <textarea> 그리고 contenteditable 속성이 적용된 요소에서 활용됩니다.
예제
다음 코드를 실행하면 JavaScript에서 onpaste 이벤트를 어떻게 처리하는지 직접 확인할 수 있습니다. 입력 필드에 텍스트를 붙여넣으면 지정한 함수가 호출됩니다.
<!DOCTYPE html>
<html>
<body>
<input type="text" onpaste="pasteFunction()" value="여기에 텍스트를 붙여넣으세요">
<script>
function pasteFunction() {
document.write("텍스트가 성공적으로 붙여넣어졌습니다!");
}
</script>
</body>
</html>addEventListener 방식으로 처리하기
HTML 속성 대신 addEventListener 메서드를 사용하면 더 유연하게 이벤트를 등록할 수 있습니다.
const input = document.querySelector("input");
input.addEventListener("paste", () => {
console.log("붙여넣기 이벤트가 발생했습니다!");
});이처럼 onpaste(또는 'paste') 이벤트를 활용하면 사용자가 붙여넣은 내용을 검증하거나, 특정 형식만 허용하는 등 다양한 상황에 맞게 처리 로직을 구현할 수 있습니다.