JavaScript ClipboardItem : Object

constructor

An item to place on the clipboard. Note FireFox does not yet support this API. See Bug 1619947.

Spec

Constructors

new ClipboardItem(valuesByType : Object, [options : Object]) : ClipboardItem

options : {

presentationStyle

String

'attachment', 'inline', or 'unspecified'. Default = 'unspecified'.

}

valuesByType is an object where the property names are the mime types and the property values are the data for that type. The property values must be either a String or Blob, or a Promise that returns a String or Blob. Note Chrome does not yet support promises. See Bug 1014310.

Copy Text Example

Example:

<input value='value to copy'>
<button id='copy'>copy</button>
<script>
  document.getElementById('copy').onclick = async () => {
    const value = document.querySelector('input').value;
    const type = 'text/plain';
    const blob = new Blob([value], { type });

    const cbi = new ClipboardItem({
      [type]: blob
    });
    await navigator.clipboard.write([cbi]);
    console.log(`copied '${value}' to clipboard`); 
  };
</script>

Run

Results:

Copy Image Example

Example:

<button id='copy'>copy</button>
<script>
  document.getElementById('copy').onclick = async () => {
    // Create an image of a circle
    const canvas = document.createElement('canvas');
    const context = canvas.getContext('2d');
    context.fillStyle = 'red';
    context.beginPath();
    context.arc(50, 50, 30, 0, 2 * Math.PI);
    context.fill();

    const cbi = new ClipboardItem({
      'image/png': new Promise(r => canvas.toBlob(r))
    });
    await navigator.clipboard.write([cbi]);
    console.log(`copied image to clipboard`);
  };
</script>

Run