JavaScript Clipboard : EventTarget

Provides access to the system cut/copy/paste clipboard.

Spec

Instance Methods

Example:

<button id='paste'>paste</button>
<script>
  document.getElementById('paste').onclick = async () => {
    const values = await navigator.clipboard.read();
    for (const value of values) {
      for (const type of value.types) {
        const blob = await value.getType(type);
        console.log(`${type}: ${ blob.size } bytes`);
      }
    }
  };
</script>

Run

Results:

Spec

readText() : Promise<String>

Example:

<button id='paste'>paste</button>
<script>
  document.getElementById('paste').onclick = async () => {
    const value = await navigator.clipboard.readText();
    console.log(`read '${value}' from clipboard`);
  };
</script>

Run

Results:

Spec

write(items : Iterable<ClipboardItem>) : Promise<undefined>

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

Results:

Spec

writeText(text : String) : Promise<undefined>

Example:

<input value='value to copy'>
<button id='copy'>copy</button>
<script>
  document.getElementById('copy').onclick = async () => {
    const value = document.querySelector('input').value;
    await navigator.clipboard.writeText(value);
    console.log(`copied '${value}' to clipboard`); 
  };
</script>

Run

Results:

Spec

home license contribute feedback