paste

The paste event is fired when a selection has been pasted from the clipboard to the document.

Properties

Example usage

HTML

<textarea></textarea>

<div contenteditable="true"></div>

JavaScript

document.querySelector('textarea').addEventListener('paste', (e) => {
  console.log(e);
  window.setTimeout(() => {
    // Do something immediately after the paste event
  });
});

document.querySelector('div').addEventListener('paste', (e) => {
  console.log(e);
  window.setTimeout(() => {
    // Do something immediately after the paste event
  });
});

Modify the clipboard content before pasting

HTML

<div contenteditable="true"></div>

JavaScript

document.querySelector('div').addEventListener('paste', (e) => {
  // Prevent the default pasting event and stop bubbling
  e.preventDefault();
  e.stopPropagation();

  // Get the clipboard data
  let paste = (e.clipboardData || window.clipboardData).getData('text');
  
  // Do something with paste like remove non-UTF-8 characters
  paste = paste.replace(/[^\x20-\xFF]/gi, '');

  // Find the cursor location or highlighted area
  const selection = window.getSelection();

  // Cancel the paste operation if the cursor or highlighted area isn't found
  if (!selection.rangeCount) return false;

  // Paste the modified clipboard content where it was intended to go
  selection.getRangeAt(0).insertNode(document.createTextNode(paste));
});

Specifications

Browser compatibility

We're converting our compatibility data into a machine-readable JSON format. This compatibility table still uses the old format, because we haven't yet converted the data it contains. Find out how you can help!

Related events

• copy
• cut