HTML onpaste Attribute

Introduction

The onpaste attribute is an inline event handler that runs JavaScript when the paste event fires. That happens when the user pastes content — with Ctrl+V (Cmd+V on Mac), Edit → Paste, or a context menu Paste action. Use it to validate pasted text, transform formatting, strip unwanted characters, or show feedback. Read clipboard data with event.clipboardData.getData("text"). Call event.preventDefault() when you replace the default paste. For production, prefer addEventListener("paste", …).

What You’ll Learn

Purpose of onpaste Attribute

The primary purpose of onpaste is to react when the user inserts clipboard content into an editable field — so you can enforce rules (numbers only, max length), normalize text (uppercase emails), or log analytics without waiting for an input event after the fact.

The paste event fires on the element that receives the paste — typically <input>, <textarea>, or a contenteditable region. It bubbles, so a parent can listen for pastes in multiple fields.

📝 Syntax

Set onpaste on an editable element or assign element.onpaste in JavaScript:

<input type="text" onpaste="handlePaste(event)">

<textarea onpaste="handlePaste(event)"></textarea>

<script>
  field.onpaste = handlePaste;
</script>

Syntax Rules

• Value is JavaScript executed when the paste event fires.
• Pass event to access clipboardData.
• Works on editable elements: input, textarea, contenteditable.
• Use event.preventDefault() before custom insertion.
• The event bubbles — listen on a parent for multiple fields.
• Modern alternative: element.addEventListener("paste", handler).
• Do not block paste without good reason — it frustrates users.

💎 Values

The onpaste attribute accepts a string of JavaScript code:

• onpaste="handlePaste(event)" — Call a function with the event.
• onpaste="logPaste(event)" — Show feedback on paste.
• JavaScript: input.onpaste = (e) => { … } — property assignment.

function handlePaste(event) {
  event.preventDefault();
  const pasted = event.clipboardData.getData("text");
  const cleaned = pasted.replace(/\D/g, ""); // digits only
  event.target.value = cleaned;
}

Applicable Elements

onpaste vs oncopy vs oncut

Examples Gallery

Uppercase on paste, dynamic handler assignment, and digits-only validation.

<input type="text" id="pasteInput" onpaste="handlePaste(event)">

<script>
  function handlePaste(event) {
    event.preventDefault();
    const pasted = event.clipboardData.getData("text");
    document.getElementById("pasteInput").value =
      pasted.toUpperCase();
  }
</script>

<input type="text" id="dynamicPasteField">

<script>
  document.getElementById("dynamicPasteField").onpaste =
    function (event) {
      document.getElementById("log").textContent =
        "Paste detected at " +
        new Date().toLocaleTimeString();
    };
</script>

function digitsOnlyPaste(event) {
  event.preventDefault();
  const pasted = event.clipboardData.getData("text");
  event.target.value = pasted.replace(/\D/g, "");
}

♿ Accessibility

• Do not block paste unnecessarily — Paste is essential for many users, including assistive technology users.
• Explain transformations — If paste changes text, show a brief status message.
• Keep fields paste-friendly — Avoid stripping content users expect (password managers, autofill).
• Use visible error text — Not color alone when paste is rejected.
• Prefer validation over blocking — Clean input rather than silently failing.

💡 Best Practices