webdevpuneet.com

Related Snippets

91 in Buttons category
43–48 of 60

Clipboard Paste Button

Web Share Button

Dyslexia-Friendly Reading Mode

Text-to-Speech Button

High Contrast Mode Toggle

AI Voice Input Button

Clipboard Paste Button — Smart Paste Field in HTML & JS

Clipboard Paste Button · Buttons · Plain HTML, CSS & JS · Live preview

CategoryButtons
TagsClipboard APIForms & ValidationKeyboard NavigationSVGMicro-Interactions

Copy & paste

Source Code

<section class="cpb-wrap">
  <span class="cpb-tag">navigator.clipboard · smart paste</span>
  <h1>Smart paste field</h1>
  <p class="cpb-lead">One click reads your clipboard. If the browser says no, the field arms itself so your own paste finishes the job.</p>

  <div class="cpb-card">
    <div class="cpb-row">
      <label class="cpb-label" for="cpbInput">Paste anything</label>
      <label class="cpb-switch"><input type="checkbox" id="cpbTrim" checked><span class="cpb-track"></span><span>Trim spaces</span></label>
    </div>

    <div class="cpb-field" id="cpbField">
      <textarea class="cpb-input" id="cpbInput" rows="1" placeholder="Tracking number, link, email, JSON, colour…" spellcheck="false" autocomplete="off"></textarea>
      <button class="cpb-x" id="cpbClear" type="button" aria-label="Clear field" hidden><svg viewBox="0 0 24 24" width="14" height="14" fill="none" stroke="currentColor" stroke-width="2.4" stroke-linecap="round"><path d="M6 6l12 12M18 6L6 18"/></svg></button>
    </div>

    <div class="cpb-detect" id="cpbDetect">
      <span class="cpb-chip" id="cpbChip" data-type="none">Empty</span>
      <span class="cpb-meta" id="cpbMeta">Detects what you paste</span>
      <span class="cpb-action" id="cpbAction"></span>
    </div>

    <div class="cpb-image" id="cpbImage" hidden>
      <img id="cpbThumb" alt="Pasted image preview" width="44" height="44">
      <div><b>Image pasted</b><span id="cpbImgInfo"></span></div>
      <button type="button" class="cpb-link" id="cpbImgRemove">Remove</button>
    </div>

    <div class="cpb-actions">
      <button class="cpb-btn primary" id="cpbPasteBtn" type="button" data-state="idle">
        <svg class="ic-paste" viewBox="0 0 24 24" width="16" height="16" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><rect x="8" y="2" width="8" height="4" rx="1"/><path d="M16 4h2a2 2 0 012 2v14a2 2 0 01-2 2H6a2 2 0 01-2-2V6a2 2 0 012-2h2"/></svg>
        <svg class="ic-check" viewBox="0 0 24 24" width="16" height="16" fill="none" stroke="currentColor" stroke-width="2.6" stroke-linecap="round" stroke-linejoin="round"><path d="M20 6L9 17l-5-5"/></svg>
        <i class="ic-spin"></i>
        <span id="cpbPasteLabel">Paste from clipboard</span>
      </button>
      <button class="cpb-btn" id="cpbCopyBtn" type="button" data-state="idle">
        <svg class="ic-copy" viewBox="0 0 24 24" width="16" height="16" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><rect x="9" y="9" width="12" height="12" rx="2"/><path d="M5 15H4a2 2 0 01-2-2V4a2 2 0 012-2h9a2 2 0 012 2v1"/></svg>
        <svg class="ic-check" viewBox="0 0 24 24" width="16" height="16" fill="none" stroke="currentColor" stroke-width="2.6" stroke-linecap="round" stroke-linejoin="round"><path d="M20 6L9 17l-5-5"/></svg>
        <span id="cpbCopyLabel">Copy</span>
      </button>
    </div>

    <div class="cpb-armed" id="cpbArmed" hidden>
      <div class="cpb-keys"><kbd id="cpbKeyMod">Ctrl</kbd><b>+</b><kbd id="cpbKeyV">V</kbd></div>
      <p id="cpbArmedMsg"></p>
    </div>

    <p class="cpb-status" role="status" aria-live="polite"><span id="cpbStatusText">Example loaded. Press Paste, or copy something and try it.</span><button type="button" class="cpb-link" id="cpbUndo" hidden>Undo</button></p>

    <div class="cpb-recent" id="cpbRecent" hidden><span>Recent</span><div id="cpbChips"></div></div>
  </div>

  <p class="cpb-note">Clipboard reads need HTTPS, a click, and usually a permission. Inside a sandboxed preview frame they are often blocked, and that is exactly the case the armed state handles. Recent pastes live in memory only and are never saved.</p>
</section>

Extend with AI

Take This Snippet Further With AI

The AI prompt for this one is for Patreon supporters ($3 a month, 7 days free), along with a site with no ads. Supporters enter the passcode once and it is remembered in this browser.

· Become a supporter

What's included

Features

One-click navigator.clipboard.readText() paste with spinner, success and armed button states
Armed fallback: blocked reads focus the field and show keycaps that press down with your real keys
Native paste handling, including images from the clipboard, with a thumbnail, type, size and dimensions
Type detection for links, emails, phones, hex colours, numbers, JSON and UPS, FedEx and USPS tracking numbers
Per-type actions: open, write, call, track with the carrier, and prettify or minify JSON
Trim switch, seven-second Undo, Escape to clear and a five-item Recent list kept in memory only
Copy with writeText(), a hidden-textarea execCommand fallback and a select-for-you last resort
Live-region status, visible focus rings, a native switch and reduced-motion support, no libraries

About this UI Snippet

Clipboard Paste Button — One-Click Paste That Still Works When the Browser Says No

Screenshot of the Clipboard Paste Button snippet rendered live

This snippet is a paste field built around one awkward fact: navigator.clipboard.readText() is permission-gated, needs HTTPS and a click, and is frequently blocked outright inside sandboxed iframes. Most paste buttons simply break when that happens. This one treats a refusal as a normal state. The button tries a one-click read, and if the browser declines, the field *arms* itself and shows the keys to press, so a native paste finishes the job and the user never hits a dead end.

The paste button and its four states

The button moves through idle, reading, done and armed, driven by a single data-state attribute so CSS draws each one: a clipboard icon, a spinner while the browser decides, an animated check, and a pulsing amber state that says "Now press Ctrl V" (or the command key on Apple devices). If a permission prompt is left open and the user pastes by hand instead, a read token makes the late result get ignored rather than overwriting what they just pasted.

Armed fallback instead of an error

When readText() rejects with NotAllowedError, is missing, or returns an empty string, arm() focuses the field, pulses its border and shows a pair of keycaps that physically press down as you hold the real keys. The reason is stated in plain words, and a native paste event on the field is never gated by the Clipboard API, so it always works. That event reads clipboardData, so the same path also catches pasted images.

Detecting what was pasted

Every value is classified as you type or paste: a link, email address, phone number, hex colour, number, valid JSON, or a parcel tracking number matched to UPS, FedEx or USPS formats. Each type gets a colour chip, a short description, and one useful action: Open, Write, Call, Track (a carrier tracking link), or Prettify and Minify for JSON. Links are built with DOM methods and rel="noopener noreferrer", and pasted text is only ever assigned with textContent, never as HTML.

Trim, undo and recent pastes

A switch trims stray spaces and line breaks that clipboards love to add, and the status line reports how many characters were removed. Every paste, clear or restore offers a seven-second Undo. Escape clears the field, also undoable. The last five distinct pastes appear as chips you can click to reuse. They live in memory only and are never written to storage, which matters when people paste tokens and addresses.

Copying back out

Copy calls navigator.clipboard.writeText(), falls back to a hidden textarea and document.execCommand('copy'), and as a last resort selects the text so the manual shortcut is one keystroke. An empty field shakes instead of copying nothing. Pair it with a plain copy button, an API key copy field for secrets, or a paste-to-upload area for files.

Accessibility and motion

The status line is a polite live region, every control is a real button with a visible focus ring, the trim switch is a native checkbox, and prefers-reduced-motion stops the pulses and shake. The layout stacks on narrow screens.

Step by step

How to Use

  1. 1
    Press "Paste from clipboard"The button calls navigator.clipboard.readText() from your click. The browser may ask once for permission; while it decides, the button shows a spinner.
  2. 2
    See what you pastedThe chip names the type: link, email, phone, hex colour, number, JSON or a UPS, FedEx or USPS tracking number. The action beside it opens, calls, tracks or prettifies it.
  3. 3
    Follow the armed hint if access is blockedWhen the browser refuses, the button turns amber, the field glows and the keycaps show what to press. A normal paste then fills the field, and it also accepts pasted images.
  4. 4
    Undo, clear and reuseUndo appears for seven seconds after any paste or clear. Press Escape to clear, and click a Recent chip to bring an earlier value back. Turn off Trim spaces to keep padding.
  5. 5
    Copy it back outCopy writes the field to the clipboard and confirms with a check. An empty field shakes, and if every method is blocked the text is selected for a manual copy.
  6. 6
    Wire it into your formReplace the detect() rules with your own validator, swap the textarea for an input, or call apply(text) from your own button to reuse the trim, undo and history behaviour.

Real-world uses

Common Use Cases

Order and tracking lookup
Paste a parcel number and see the carrier named with a direct Track link, so support staff and shoppers skip retyping 18 characters.
Developer tools and JSON inputs
Detect valid JSON on paste, show the key count and offer Prettify, handy for webhook testers and config panels. Secrets belong in an API key copy field.
Link and contact importers
Recognise URLs, emails and phone numbers as they land and give each a one-tap action, ideal for CRMs, bookmarking apps and address books.
Colour and value pickers
A pasted hex code shows a live swatch next to its value, a quick way to bring palettes in from a design file or chat message.
Forms that survive blocked permissions
Embedded in iframes or locked-down browsers the armed state keeps paste usable. For files and screenshots, see the paste to upload snippet.
Teaching the Clipboard API
It shows permission, user gesture, sandbox and fallback handling in one short file, next to the simpler copy button for one-way copying.

Got questions?

Frequently Asked Questions

readText() needs HTTPS, a click and usually a permission, and sandboxed frames often block it with no prompt at all. The amber state means the browser refused, and the field is armed so your own paste, which is never blocked, still fills it.

No. Browsers only allow readText() in direct response to a user gesture and normally ask permission first. This snippet calls it solely when you press the Paste button, and keeps recent pastes in memory, never in storage.

A text field cannot hold an image, so the native paste event is caught and the picture appears as a thumbnail with its type, size and pixel dimensions. Remove clears it, and the one-click button reads text only.

It matches common formats only: UPS 1Z numbers, 12 or 15 digit FedEx numbers and 20 to 22 digit USPS numbers starting with 9. Other carriers fall back to Number or Text, and you can add patterns to the CARRIERS table.

Yes. Pasted text is only assigned with textContent and value, never as HTML. Links are limited to valid http and https URLs and open with rel noopener noreferrer, and mailto and tel links are built from the validated value.