HTMLElement: paste event

Experimental: This is an experimental technology
Check the Browser compatibility table carefully before using this in production.

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 ClipboardEvent

Event properties

Also inherits properties from its parent Event.

ClipboardEvent.clipboardData Read only

Is 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

<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

No specification found

No specification data found for api.HTMLElement.paste_event.
Check for problems with this page or contribute a missing spec_url to mdn/browser-compat-data. Also make sure the specification is included in w3c/browser-specs.

Browser compatibility

No compatibility data found for api.HTMLElement.paste_event.
Check for problems with this page or contribute missing data to mdn/browser-compat-data.

See also