Web/API/Element/paste event

From Get docs


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

Bubbles Yes
Cancelable Yes
Interface ClipboardEvent
Event handler property onpaste

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.

Examples

Live example

HTML

<div class="source" contenteditable="true">Try copying text from this box...</div>
<div class="target" contenteditable="true">...and pasting it into this one</div>

JS

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

target.addEventListener('paste', (event) => {
    let paste = (event.clipboardData || window.clipboardData).getData('text');
    paste = paste.toUpperCase();
 
    const selection = window.getSelection();
    if (!selection.rangeCount) return false;
    selection.deleteFromDocument();
    selection.getRangeAt(0).insertNode(document.createTextNode(paste));

    event.preventDefault();
});

Result

Specifications

Specification Status
Clipboard API and events Working Draft

Browser compatibility

Update compatibility data on GitHub

Desktop Mobile
Chrome Edge Firefox Internet Explorer Opera Safari Android webview Chrome for Android Firefox for Android Opera for Android Safari on iOS Samsung Internet
paste event Chrome

Full support 58

Edge

Full support 12

Firefox

Full support 22

IE

Full support 11

Opera

Full support 45

Safari

Full support 5

WebView Android

Full support 58

Chrome Android

Full support 58

Firefox Android

Full support 22

Opera Android

Full support 43

Safari iOS

Full support 4.2

Samsung Internet Android

Full support 7.0

clipboardData Chrome

Full support 58

Edge

Full support ≤18

Firefox

Full support 22

IE

No support No

Opera

Full support 45

Safari

Full support Yes

WebView Android

Full support 58

Chrome Android

Full support 58

Firefox Android

Full support 22

Opera Android

Full support 43

Safari iOS

Full support Yes

Samsung Internet Android

Full support 7.0

Legend

Full support  
Full support
No support  
No support


See also