W3cubDocs

/Web APIs

Element: paste event

The paste event is fired when the user has initiated a "paste" action through the browser's user interface.

If the cursor is in an editable context (for example, in a <textarea> or an element with contenteditable attribute set to true) then the default action is to insert the contents of the clipboard into the document at the cursor position.

A handler for this event can access the clipboard contents by calling getData() on the event's clipboardData property.

To override the default behavior (for example to insert some different data or a transformation of the clipboard contents) an event handler must cancel the default action using event.preventDefault(), and then insert its desired data manually.

It's possible to construct and dispatch a synthetic paste event, but this will not affect the document's contents.

Syntax

Use the event name in methods like addEventListener(), or set an event handler property.

js

addEventListener("paste", (event) => {});

onpaste = (event) => {};

Event type

Examples

Live example

HTML

html

<div class="source" contenteditable="true">Copy text from this box.</div>
<div class="target" contenteditable="true">And paste it into this one.</div>

JavaScript

js

const target = document.querySelector("div.target");

target.addEventListener("paste", (event) => {
  event.preventDefault();

  let paste = (event.clipboardData || window.clipboardData).getData("text");
  paste = paste.toUpperCase();
  const selection = window.getSelection();
  if (!selection.rangeCount) return;
  selection.deleteFromDocument();
  selection.getRangeAt(0).insertNode(document.createTextNode(paste));
  selection.collapseToEnd();
});

Result

Specifications

Browser compatibility

Desktop Mobile
Chrome Edge Firefox Internet Explorer Opera Safari WebView Android Chrome Android Firefox for Android Opera Android Safari on IOS Samsung Internet
paste_event 1 12 22
9["Before Internet Explorer 11, copying files does not trigger the paste event.", "Before Internet Explorer 9, this event is not supported via addEventListener; however, the event handler is supported since IE 5.5. The event can be listened to via element.oncopy."]
≤12.1 3 ≤37 18 22 ≤12.1 3 1.0

See also

© 2005–2023 MDN contributors.
Licensed under the Creative Commons Attribution-ShareAlike License v2.5 or later.
https://developer.mozilla.org/en-US/docs/Web/API/Element/paste_event