Clipboard API: text demonstration

Buttons will appear on this page when the Clipboard API is supported.

Copy

// Clipboard API supported?
if (!navigator.clipboard) return;

// copy text to clipboard
if (navigator.clipboard.writeText) {
  await navigator.clipboard.writeText( 'put this text on clipboard' );
}

// get text from clipboard
if (navigator.clipboard.readText) {
  const text = await navigator.clipboard.readText();
}

This code can be copied by clicking the copy code button.

The code block has an ID of copycode. This is referenced as a CSS selector in the button's data-copy="#copycode" attribute.

You can also copy the value of a form field by setting the button's data-copy attribute to the field's ID:

This next button copies the text in its data-copy attribute to the clipboard:

Paste