Element: paste 이벤트

Baseline Widely available

This feature is well established and works across many devices and browser versions. It’s been available across browsers since March 2017.

paste 이벤트는 사용자가 브라우저의 사용자 인터페이스를 통해 붙여넣기를 했을 때 발생합니다.

버블링 예
취소 가능 예
인터페이스 ClipboardEvent
이벤트 처리기 속성 onpaste

현재 커서가 편집 가능한 맥락 (<textarea> 등, 또는 contenteditable 특성이 true인 요소) 내에 위치한 경우, 이벤트의 기본 동작은 커서 위치에 클립보드의 내용을 삽입하는 것입니다.

paste 이벤트 처리기는 이벤트의 ClipboardEvent.clipboardData 속성에 대해 getData() 메서드를 호출해 클립보드 콘텐츠를 읽을 수 있습니다.

데이터 가공 등을 위해 기본 동작을 재정의해야 할 필요가 있는 경우 event.preventDefault()을 호출해 취소하고, 직접 데이터를 삽입하면 됩니다.

합성 paste 이벤트를 생성해서 발송할 수는 있지만, 이 방법으로는 문서 내용에 영향을 줄 수 없습니다.

예제

HTML

html
<div class="source" contenteditable="true">
  이 상자에서 텍스트를 복사해보세요...
</div>
<div class="target" contenteditable="true">...여기에 붙여 넣어 보세요.</div>

JS

js
const target = document.querySelector("div.target");

target.addEventListener("paste", (event) => {
  const paste = (event.clipboardData || window.clipboardData).getData("text");
  const reversed = Array.from(paste).reverse().join("");

  const selection = window.getSelection();
  if (!selection.rangeCount) return false;
  selection.deleteFromDocument();
  selection.getRangeAt(0).insertNode(document.createTextNode(reversed));

  event.preventDefault();
});

결과

명세

Specification
Clipboard API and events
# clipboard-event-paste
HTML Standard
# handler-onpaste

브라우저 호환성

BCD tables only load in the browser

같이 보기