JavaScript Element paste Event

Beginner
5 min read
Updated: Nov 2026
3 examples
Event
Decorative image with the word PASTE

Definition

In JavaScript, the paste event fires when the user starts a paste action through the browser UI (MDN). In an editable context (<input>, <textarea>, or contenteditable), the default action inserts clipboard contents at the cursor.

Register a listener with addEventListener. Check readiness and browser support before you rely on this event.

Syntax

Listen for paste. Start with this line.

JavaScript
addEventListener("paste", fn)
CallWhat it does
addEventListener("paste", fn)Primary signature.

Built into the browser. Listen with el.addEventListener("paste", …) — no import required.

Library declarations
JavaScript
addEventListener("paste", fn)

Parameters

ParameterDescription
Event nameRequired. "paste"
Handler propOptional. onpaste

Return Value

Return ValueDescription
*Fires as an Element event (listener receives the Event object).

JavaScript Examples

Example 1 — Paste as Uppercase (MDN)

Cancel default insert, uppercase clipboard text, then insert it.

JavaScript
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();
});
Try It Yourself

How It Works

  1. Listen on the target. Paste must land in that editable element.
  2. Cancel the default. So the browser does not insert the raw clipboard text.
  3. Read clipboard text. getData("text") (MDN).
  4. Insert the transform. Uppercase, then place a text node at the selection.

Example 2 — Log Pasted Text

Observe clipboard contents without changing what gets inserted.

JavaScript
document.addEventListener("paste", (event) => {
  const text = event.clipboardData.getData("text");
  console.log("Pasted:", text);
});
Try It Yourself

How It Works

  1. Listen on document. Catches paste from nested editables (bubbles).
  2. Call getData("text"). Reads the text payload in the paste handler.
  3. Do not call preventDefault. Default insert still runs.
  4. Unlike copy, paste handlers may read clipboard data (MDN).

Example 3 — Block Paste on an Element

Cancel the default so nothing is inserted into that control.

JavaScript
const field = document.getElementById("no-paste");

field.addEventListener("paste", (event) => {
  event.preventDefault();
  console.log("Paste blocked");
});
Try It Yourself

How It Works

  1. Target one element. Only that control’s paste default is canceled.
  2. Call preventDefault(). Stops the browser from inserting clipboard contents.
  3. UX, not security. Users can still type or use other APIs — explain why paste is disabled.
  4. Prefer clear labels when paste is intentionally blocked (accessibility).
Compatibility

Browser Support

Element paste is Baseline Widely available (MDN: since July 2015). Safe to use in modern and older evergreen browsers.

✓ Baseline · Widely available

paste

Fires when the user initiates a paste action through the browser UI.

99% Widely available
Google Chrome Yes
Yes
Microsoft Edge Yes
Yes
Mozilla Firefox Yes
Yes
Apple Safari Yes
Yes
Opera Yes
Yes
Internet Explorer Yes (legacy)
Yes
paste Excellent

Bottom line: Use paste to observe or customize the user’s paste gesture. Read with clipboardData.getData; cancel + insert when transforming. See the MDN paste reference.

Frequently Asked Questions

It fires when the user starts a paste action through the browser UI (for example Ctrl+V / Cmd+V or Edit → Paste). In an editable context, the default action inserts clipboard contents at the cursor (MDN).
No. MDN marks Element paste as Baseline Widely available (since July 2015). It is not Deprecated, Experimental, or Non-standard.
A ClipboardEvent. The important property is clipboardData, which you can read with getData(format) in a paste handler.
Call event.preventDefault() to cancel the default insert, read clipboardData.getData("text"), transform it, then insert the result yourself (MDN).
No. You can construct and dispatch a paste event, but MDN notes that doing so will not affect the document’s contents.
paste is inbound and can read clipboardData. copy and cut are outbound: handlers typically write with setData and cannot read the clipboard.

Next: pointercancel

Continue with the Element pointercancel event.

pointercancel →

About the author

Mari Selvan M P
Mari Selvan M P 🔗

Developer, cloud engineer, and technical writer

  • Experience 12 years building web and cloud systems
  • Focus Full Stack Development, AWS, and Developer Education

I write practical tutorials so students and working developers can learn by doing—from databases and APIs to deployment on AWS.

AWS Certified Developer – Associate (Credly)

14 people found this page helpful

JavaScript Element MozMousePixelScroll Event JavaScript Element pointercancel Event