Clipboard API

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

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

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

Clipboard (en-US) Secure context

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

ClipboardEvent Secure context

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

ClipboardItem (en-US) Secure context

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

• Async Clipboard API 데모 (Glitch)
• web.dev의 Async Clipboard API