HTML에서 사용자가 텍스트를 붙여넣을 때 스크립트 실행하기

웹 개발을 하다 보면 사용자가 입력 필드에 텍스트를 붙여넣기하는 순간을 감지해야 하는 경우가 종종 있습니다. HTML에서는 바로 이럴 때 onpaste 속성을 사용하면 됩니다.

onpaste는 사용자가 요소에 콘텐츠를 붙여넣는 순간 자동으로 트리거되는 이벤트 속성으로, 여기에 JavaScript 함수를 연결하면 붙여넣기 동작에 반응하는 스크립트를 실행할 수 있습니다.

onpaste 기본 예제

아래 코드는 입력 필드에 텍스트를 붙여넣었을 때 화면에 메시지를 표시하는 간단한 예제입니다. 직접 실행해 보면서 동작을 확인해 보세요.

<!DOCTYPE html>
<html>
<body>
   <input type = "text" onpaste = "display()" value = "Paste text here">

   <h2 id = "test">Try to paste any text.</h2>

   <script>
      function display() {
         document.getElementById("test").innerHTML = "Your pasted text worked!";
      }
   </script>
</body>
</html>

코드 설명

<input> 요소: onpaste = "display()" 속성을 통해 붙여넣기 이벤트가 발생하면 display() 함수가 호출됩니다.
<h2 id="test"> 요소: 결과 메시지가 출력될 영역입니다.
display() 함수: document.getElementById()로 해당 요소를 찾아 innerHTML 값을 변경하여 붙여넣기 성공 메시지를 표시합니다.

참고 사항

onpaste 이벤트는 <input>, <textarea> 같은 입력 요소뿐만 아니라 일반적인 편집 가능한 요소(contenteditable)에서도 동작합니다. 또한 최신 개발 환경에서는 HTML 속성 대신 addEventListener('paste', ...) 방식으로 이벤트를 등록하는 것이 더 권장되며, 이벤트 객체의 clipboardData를 활용하면 붙여넣은 실제 데이터도 확인할 수 있습니다.

HTML에서 사용자가 텍스트를 붙여넣을 때 스크립트 실행하기 – onpaste 이벤트 활용법

onpaste 기본 예제

코드 설명

참고 사항