This page needs to be updated to match the currently specified behaviour. In the meantime please refer to the specification: https://www.w3.org/TR/clipboard-apis/#the-paste-action

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

Bubbles Yes
Cancelable Yes
Target objects DefaultView, Document, Element
Interface ClipboardEvent

Properties

Property Type Description
target Read only EventTarget The event target (the topmost target in the DOM tree).
type Read only DOMString The type of event.
bubbles Read only boolean Does the event normally bubble?
cancelable Read only boolean Is it possible to cancel the event?
clipboardData Read only DataTransfer The contents of the clipboard. Not only text, but also files and images.

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

Specification Status Comment
W3C Working Draft, 29 September 2017 Working Draft https://www.w3.org/TR/clipboard-apis/#clipboard-event-paste

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!

     
Feature Chrome Edge Firefox (Gecko) Internet Explorer Opera Safari (WebKit)
Basic support 58 (Yes) (Yes) 11 45 (Yes)
clipboardData 58 (Yes) 22 (22) No support (use window.clipboardData instead) 45 (Yes)
Feature Android Webview Chrome for Android Edge Firefox Mobile (Gecko) IE Phone Opera Mobile Safari Mobile
Basic support 58 58 (Yes) ? ? 45 ?
clipboardData 58 58 (Yes) ? ? 45 ?

Document Tags and Contributors

 Last updated by: depthdev,