Clipboard

Clipboard

navigator.clipboard (Baseline since June 2024) replaces document.execCommand('copy'). writeText() and readText() handle text; write() and read() take ClipboardItems holding one Blob per MIME type, so one copy can offer HTML to a word processor and plain text to a terminal.

Copying text and a rich HTML item from a click handlerJavaScript

copyButton.onclick = async () => {
  await navigator.clipboard.writeText('Larry Tesler 1945-2020');
  const html = new Blob(['<b>Cut</b>, copy, paste'], { type: 'text/html' });
  const text = new Blob(['Cut, copy, paste'], { type: 'text/plain' });
  await navigator.clipboard.write([new ClipboardItem({ 'text/html': html, 'text/plain': text })]);
  const [item] = await navigator.clipboard.read();
  console.log(item.types.join(), ClipboardItem.supports('image/svg+xml'));
};

Output

text/plain,text/html true

Chromium 4,389 asks for the clipboard-read permission before reading; Firefox 555 and Safari 10 show a Paste menu the user must choose. Test formats beyond text/plain, text/html and image/png with ClipboardItem.supports(). To change what Ctrl+C copies, handle the copy event and set event.clipboardData.

MENU