JavaScript Element paste Event

What You’ll Learn

The paste event fires when the user starts a paste action in the browser UI. Learn clipboardData.getData, how to cancel and transform pasted text, onpaste, editable contexts, and five try-it labs.

Introduction

paste answers: “Did the user just paste through the browser UI?” If the cursor is in an editable context (an <input>, <textarea>, or an element with contenteditable), the default action inserts clipboard contents at the caret.

Unlike copy / cut, a paste handler can read clipboard data via event.clipboardData.getData(...). That makes paste the place to sanitize, transform, or block inbound clipboard content.

Understanding paste

An instance event that answers: “Did the user initiate paste?”

• Fires when paste starts through the browser UI (keyboard, menu, etc.).
• ClipboardEvent — read with clipboardData.getData(format).
• Default — insert clipboard contents into an editable context.
• Cancelable — preventDefault() stops the default insert so you can paste custom data.
• Bubbles — up through the DOM to Document and Window; also composed.
• Baseline Widely available on MDN (since July 2015).

📝 Syntax

Use the event name with addEventListener, or set the handler property:

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

onpaste = (event) => { };

Event type

A ClipboardEvent (inherits from Event).

Handy properties

⚡ When paste Fires

• The user pastes via keyboard (Ctrl+V / Cmd+V) or the Edit menu.
• In editable contexts, the browser prepares to insert clipboard contents at the cursor.
• A synthetic paste event can be dispatched, but it will not change the document.

⚖️ paste vs copy / cut

Examples Gallery

Examples follow MDN Element: paste event. Copy text somewhere, then paste into the target with Ctrl+V / Cmd+V.

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();
});

HELLO

const field = document.getElementById("field");
const out = document.getElementById("out");

field.onpaste = (event) => {
  const text = event.clipboardData.getData("text");
  out.textContent = "Pasting " + text.length + " character(s)";
};

Pasting 5 character(s)

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

editor.addEventListener("paste", (event) => {
  const text = event.clipboardData.getData("text");
  out.textContent = "Paste preview: " + JSON.stringify(text.slice(0, 40));
});

Paste preview: "hello from clipboard"

const target = document.getElementById("target");

target.addEventListener("paste", (event) => {
  event.preventDefault();
  const clean = event.clipboardData.getData("text").trim();
  const selection = window.getSelection();
  if (!selection.rangeCount) return;
  selection.deleteFromDocument();
  selection.getRangeAt(0).insertNode(document.createTextNode(clean));
  selection.collapseToEnd();
});

Pasted text has outer spaces removed

const locked = document.getElementById("locked");
const out = document.getElementById("out");

locked.addEventListener("paste", (event) => {
  event.preventDefault();
  out.textContent = "Paste is disabled in this field.";
});

Paste is disabled in this field.

🚀 Common Use Cases

• Transform pasted text (uppercase, trim, strip formatting).
• Sanitize paste into rich editors (prefer plain text).
• Log or audit paste actions in custom editors.
• Soft-block paste in locked or read-only demo fields.
• Teach the clipboard trio alongside copy and cut.

🔧 How It Works

📝 Notes

• MDN: Baseline Widely available (since July 2015) — no Deprecated / Experimental / Non-standard banner.
• Paste handlers can read clipboardData; copy/cut handlers generally write, not read.
• Synthetic paste events do not change the document contents.
• Always test in editable contexts (input, textarea, contenteditable).
• Related learning: copy, cut, addEventListener(), JavaScript hub.

💡 Best Practices