Element: copy 이벤트

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.

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

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

이벤트의 기본 동작은 선택한 영역(존재하는 경우)을 클립보드로 복사하는 것입니다.

copy 이벤트 처리기는 이벤트의 ClipboardEvent.clipboardData 속성에 대해 setData(format, data) 메서드를 호출해 클립보드로 복사할 콘텐츠를 수정할 수 있고, event.preventDefault()를 호출해 기본 동작을 취소할 수도 있습니다.

그러나, 처리기에서 클립보드 데이터를 읽을 수는 없습니다.

합성 copy 이벤트를 생성해서 발송할 수는 있지만, 이 방법으로는 시스템 클립보드에 영향을 줄 수 없습니다.

예제

HTML

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

JS

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

source.addEventListener("copy", (event) => {
  const selection = document.getSelection();
  const reversed = Array.from(selection.toString()).reverse().join("");

  event.clipboardData.setData("text/plain", reversed);
  event.preventDefault();
});

결과

명세

Specification
Clipboard API and events
# clipboard-event-copy
HTML Standard
# handler-oncopy

브라우저 호환성

BCD tables only load in the browser

같이 보기