W3cubDocs

/Web APIs

HTMLElement: paste event

The paste event fires when the user initiates a paste action through the browser's user interface.

Syntax

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

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

onpaste = (event) => {};

Event type

A ClipboardEvent. Inherits from Event.

Event properties

Also inherits properties from its parent Event.

ClipboardEvent.clipboardData Read only: A DataTransfer object containing the data affected by the user-initiated cut, copy, or paste operation, along with its MIME type.

Example

This example logs every copy and paste attempt to the <textarea>.

HTML

html

<h3>Play with this text area:</h3>
<textarea id="editor" rows="3">
Try copying and pasting text into this field!
</textarea>

<h3>Log:</h3>
<p id="log"></p>

JavaScript

function logCopy(event) {
  log.innerText = `Copied!\n${log.innerText}`;
}

function logPaste(event) {
  log.innerText = `Pasted!\n${log.innerText}`;
}

const editor = document.getElementById("editor");
const log = document.getElementById("log");

editor.oncopy = logCopy;
editor.onpaste = logPaste;

Result

Specifications

Specification
Clipboard API and events # clipboard-event-paste
HTML Standard # handler-onpaste

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