Element: paste event

Sie lesen die englische Version dieses Inhalts, da für dieses Gebietsschema noch keine Übersetzung vorhanden ist. Helfen Sie uns, diesen Artikel zu übersetzen!

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
DesktopMobile
ChromeEdgeFirefoxInternet ExplorerOperaSafariAndroid webviewChrome for AndroidFirefox for AndroidOpera for AndroidSafari on iOSSamsung Internet
paste eventChrome Full support 58Edge Full support YesFirefox Full support YesIE Full support 11Opera Full support 45Safari Full support YesWebView Android Full support 58Chrome Android Full support 58Firefox Android Full support YesOpera Android Full support 43Safari iOS ? Samsung Internet Android ?
clipboardDataChrome Full support 58Edge Full support YesFirefox Full support 22IE No support NoOpera Full support 45Safari Full support YesWebView Android Full support 58Chrome Android Full support 58Firefox Android Full support 22Opera Android Full support 43Safari iOS ? Samsung Internet Android ?

Legend

Full support  
Full support
No support  
No support
Compatibility unknown  
Compatibility unknown

See also