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
The compatibility table on this page is generated from structured data. If you'd like to contribute to the data, please check out https://github.com/mdn/browser-compat-data and send us a pull request.
ClipboardEvent
The compatibility table on this page is generated from structured data. If you'd like to contribute to the data, please check out https://github.com/mdn/browser-compat-data and send us a pull request.