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.

io error: No such file or directory (os error 2) (/home/runner/work/yari/yari/mdn/translated-content/files/ko/web/api/element/index.md)

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

같이 보기