Clipboard API

Clipboard API는 클립보드 명령(잘라내기, 복사, 붙여넣기)에 응답할 수 있는 기능 및 시스템 클립보드에 비동기적으로 읽고 쓸 수 있는 방법을 제공합니다. 클립보드 콘텐츠로의 접근은 Permissions API를 통해야 하며, 사용자 동의 없이는 콘텐츠를 읽거나 수정할 수 없습니다.

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

클립보드 접근

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

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

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

인터페이스

Clipboard Secure context
시스템 클립보드에서 텍스트와 데이터를 읽고 쓸 수 있는 인터페이스를 제공합니다. 명세는 'Async Clipboard API'라고 부릅니다.
ClipboardEvent Secure context
클립보드 수정에 관련된 정보를 제공하는 이벤트, 즉 cut, copy, paste 이벤트를 나타냅니다. 명세는 'Clipboard Event API'라고 부릅니다.

명세

Specification Status Comment
Clipboard API and events Working Draft Initial definition.

브라우저 호환성

Clipboard

Update compatibility data on GitHub
DesktopMobile
ChromeEdgeFirefoxInternet ExplorerOperaSafariAndroid webviewChrome for AndroidFirefox for AndroidOpera for AndroidSafari on iOSSamsung Internet
ClipboardChrome Full support 66Edge Full support 79Firefox Full support 63IE No support NoOpera Full support 53Safari Full support 13.1WebView Android Full support 66Chrome Android Full support 66Firefox Android Full support 63Opera Android Full support 47Safari iOS Full support 13.4Samsung Internet Android Full support 9.0
readChrome Partial support 76
Notes
Partial support 76
Notes
Notes From version 76, the image/png MIME type is supported.
Partial support 66
Notes
Notes Images are not supported.
Edge Full support 79Firefox Full support 63
Notes Disabled
Full support 63
Notes Disabled
Notes Currently works just like readText(); non-text content is not currently supported.
Disabled From version 63: this feature is behind the dom.events.asyncClipboard.dataTransfer preference (needs to be set to true). To change preferences in Firefox, visit about:config.
IE No support NoOpera Full support 63Safari Full support 13.1WebView Android Partial support 84
Notes
Partial support 84
Notes
Notes From version 84, the image/png MIME type is supported.
Partial support 66
Notes
Notes Images are not supported.
Chrome Android Partial support 84
Notes
Partial support 84
Notes
Notes From version 84, the image/png MIME type is supported.
Partial support 66
Notes
Notes Images are not supported.
Firefox Android Full support 63
Notes Disabled
Full support 63
Notes Disabled
Notes Currently works just like readText(); non-text content is not currently supported.
Disabled From version 63: this feature is behind the dom.events.asyncClipboard.dataTransfer preference (needs to be set to true). To change preferences in Firefox, visit about:config.
Opera Android Full support 54Safari iOS Full support 13.4Samsung Internet Android Full support 12.0
readTextChrome Full support 66Edge Full support 79Firefox Full support 63
Notes
Full support 63
Notes
Notes Firefox only supports reading the clipboard in browser extensions, using the "clipboardRead" extension permission.
IE No support NoOpera Full support 53Safari Full support 13.1WebView Android Full support 66Chrome Android Full support 66Firefox Android Full support 63
Notes
Full support 63
Notes
Notes Firefox only supports reading the clipboard in browser extensions, using the "clipboardRead" extension permission.
Opera Android Full support 47Safari iOS Full support 13.4Samsung Internet Android Full support 9.0
writeChrome Full support 66
Notes
Full support 66
Notes
Notes From version 76, the image/png MIME type is supported.
Edge Full support 79Firefox Full support 63
Notes Disabled
Full support 63
Notes Disabled
Notes Currently works exactly like writeText(), including the availability limitations currently imposed by Firefox.
Disabled From version 63: this feature is behind the dom.events.asyncClipboard.dataTransfer preference (needs to be set to true). To change preferences in Firefox, visit about:config.
IE No support NoOpera Full support 63Safari Full support 13.1WebView Android Full support 66
Notes
Full support 66
Notes
Notes From version 84, the image/png MIME type is supported.
Chrome Android Full support 66
Notes
Full support 66
Notes
Notes From version 84, the image/png MIME type is supported.
Firefox Android Full support 63
Notes Disabled
Full support 63
Notes Disabled
Notes Currently works exactly like writeText(), including the availability limitations currently imposed by Firefox.
Disabled From version 63: this feature is behind the dom.events.asyncClipboard.dataTransfer preference (needs to be set to true). To change preferences in Firefox, visit about:config.
Opera Android Full support 54Safari iOS Full support 13.4Samsung Internet Android Full support 12.0
writeTextChrome Full support 66Edge Full support 79Firefox Full support 63
Notes
Full support 63
Notes
Notes Writing to the clipboard is available without permission in secure contexts and browser extensions, but only from user-initiated event callbacks. Browser extensions with the "clipboardWrite" permission can write to the clipboard at any time.
IE No support NoOpera Full support 53Safari Full support 13.1WebView Android Full support 66Chrome Android Full support 66Firefox Android Full support 63
Notes
Full support 63
Notes
Notes Writing to the clipboard is available without permission in secure contexts and browser extensions, but only from user-initiated event callbacks. Browser extensions with the "clipboardWrite" permission can write to the clipboard at any time.
Opera Android Full support 47Safari iOS Full support 13.4Samsung Internet Android Full support 9.0

Legend

Full support  
Full support
Partial support  
Partial support
No support  
No support
See implementation notes.
See implementation notes.
User must explicitly enable this feature.
User must explicitly enable this feature.

ClipboardEvent

Update compatibility data on GitHub
DesktopMobile
ChromeEdgeFirefoxInternet ExplorerOperaSafariAndroid webviewChrome for AndroidFirefox for AndroidOpera for AndroidSafari on iOSSamsung Internet
ClipboardEvent
Experimental
Chrome Full support YesEdge Full support 12Firefox Full support 22IE Full support 4Opera Full support YesSafari Full support YesWebView Android Full support YesChrome Android Full support YesFirefox Android Full support 22Opera Android Full support YesSafari iOS Full support YesSamsung Internet Android Full support Yes
ClipboardEvent() constructor
Experimental
Chrome Full support 58Edge Full support ≤79Firefox Full support 22IE ? Opera Full support 45Safari ? WebView Android Full support 58Chrome Android Full support 58Firefox Android Full support 22Opera Android Full support 43Safari iOS ? Samsung Internet Android Full support 7.0
clipboardData
Experimental
Chrome Full support YesEdge Full support 12Firefox Full support 22IE Full support 5Opera Full support YesSafari Full support YesWebView Android Full support YesChrome Android Full support YesFirefox Android Full support 22Opera Android Full support YesSafari iOS Full support YesSamsung Internet Android Full support Yes

Legend

Full support  
Full support
Compatibility unknown  
Compatibility unknown
Experimental. Expect behavior to change in the future.
Experimental. Expect behavior to change in the future.

같이 보기