navigator.clipboard.writeText / readText în JavaScript

Stocare și dispozitiv Browserele moderne (doar HTTPS)

Copiază un text în clipboard sau îl citește de acolo (cu permisiunea utilizatorului).

Sintaxă
await navigator.clipboard.writeText(text)
const text = await navigator.clipboard.readText()

Ce face navigator.clipboard.writeText / readText

writeText pune textul în clipboard și returnează o promisiune. Merge doar pe pagini sigure (HTTPS) și, de obicei, doar ca răspuns la o acțiune a utilizatorului, de exemplu un clic pe „Copiază”.

readText citește textul din clipboard; browserul cere permisiunea utilizatorului (sau afișează un buton „Lipește”). Ambele sunt respinse dacă permisiunea nu este acordată.

Parametri

Parametru Descriere
text Pentru writeText: textul copiat.

Ce returnează

O Promise (la readText, cu textul).

Exemple

Exemplul 1: Butonul „Copiază codul”

document.querySelector("#copiaza").addEventListener("click", async () => {
  const cod = document.querySelector("#cod-reducere").textContent;
  try {
    await navigator.clipboard.writeText(cod);
    console.log("copiat:", cod);
  } catch (e) {
    console.log("nu am putut copia:", e.name);
  }
});

Rezultat în browser

copiat: TOAMNA20

Exemplul 2: Lipirea unui cod primit prin SMS

document.querySelector("#lipeste").addEventListener("click", async () => {
  const text = await navigator.clipboard.readText();
  console.log(/^\d{6}$/.test(text.trim()) ? `cod: ${text.trim()}` : "clipboardul nu conține un cod");
});

Rezultat în browser

cod: 482913

Greșeli frecvente

  • Apelezi writeText pe o pagină HTTP sau la încărcare și primești NotAllowedError.

Comenzi înrudite

  • getSelection: Returnează textul selectat de utilizator în pagină și permite modificarea selecției.
  • input.select / setSelectionRange / showPicker: Selectează textul dintr-un câmp (tot sau o parte) și deschide din cod selectorul de dată, culoare sau fișier.
  • async / await: Scrie cod asincron care se citește ca un cod obișnuit, de sus în jos.