Clipboard API

Clipboard API는 클립보드 명령(잘라내기, 복사, 붙여넣기)에 응답하거나 시스템 클립보드에 비동기적으로 접근하고 쓸 수 있는 기능을 제공합니다.

참고 : 이 API는 웹 워커에서 사용할 수 없습니다. (WorkerNavigator에 노출되지 않음)

Clipboard API는 document.execCommand()를 사용한 클립보드 접근을 대체하기 위해 디자인되었습니다.

클립보드 접근

시스템 클립보드에 접근할 땐 Clipboard 객체의 인스턴스를 생성하지 않고, 전역 Navigator.clipboard를 사용합니다.

js
navigator.clipboard
  .readText()
  .then(
    (clipText) => (document.querySelector(".editor").innerText += clipText),
  );

위의 코드 조각은 클립보드에서 텍스트를 가져와서, editor 클래스를 가진 첫 번째 요소의 콘텐츠 뒤에 추가합니다. readText()는 (read()도 마찬가지로) 클립보드의 내용이 텍스트가 아니면 빈 문자열을 반환하므로, 이 코드는 안전합니다.

인터페이스

Clipboard 보안 컨텍스트

시스템 클립보드에서 텍스트와 데이터를 읽고 쓸 수 있는 인터페이스를 제공합니다. 명세에서는 "Async Clipboard API"라고 부릅니다.

ClipboardEvent 보안 컨텍스트

cut, copy, paste 이벤트처럼 클립보드 조작에 대한 정보를 제공하는 이벤트를 나타냅니다. 명세에서는 "Clipboard Event API"라고 부릅니다.

ClipboardItem 보안 컨텍스트

클립보드 데이터를 읽거나 쓸 때 데이터 형식을 나타낼 수 있습니다.

명세

Specification
Clipboard API and events
# clipboard-interface
Clipboard API and events
# clipboard-event-interfaces
Clipboard API and events
# clipboarditem

브라우저 호환성

api.Clipboard

Report problems with this compatibility data on GitHub
desktopmobile
Chrome
Edge
Firefox
Opera
Safari
Chrome Android
Firefox for Android
Opera Android
Safari on iOS
Samsung Internet
WebView Android
WebView on iOS
Clipboard
read
formats.unsanitized parameter
Experimental
readText
Supports image/png MIME type
Supports text/html MIME type
Supports text/plain MIME type
write
writeText

Legend

Tip: you can click/tap on a cell for more information.

Full support
Full support
No support
No support
Experimental. Expect behavior to change in the future.
See implementation notes.

api.ClipboardEvent

Report problems with this compatibility data on GitHub
desktopmobile
Chrome
Edge
Firefox
Opera
Safari
Chrome Android
Firefox for Android
Opera Android
Safari on iOS
Samsung Internet
WebView Android
WebView on iOS
ClipboardEvent
ClipboardEvent() constructor
clipboardData

Legend

Tip: you can click/tap on a cell for more information.

Full support
Full support

api.ClipboardItem

Report problems with this compatibility data on GitHub
desktopmobile
Chrome
Edge
Firefox
Opera
Safari
Chrome Android
Firefox for Android
Opera Android
Safari on iOS
Samsung Internet
WebView Android
WebView on iOS
ClipboardItem
ClipboardItem() constructor
getType() method
presentationStyle
supports() static method
Support for image/svg+xml MIME type.
Experimental
Support for custom formats starting with web .
Experimental
types

Legend

Tip: you can click/tap on a cell for more information.

Full support
Full support
Partial support
Partial support
In development. Supported in a pre-release version.
In development. Supported in a pre-release version.
No support
No support
Experimental. Expect behavior to change in the future.
Has more compatibility info.

같이 보기