Jak wkleić tekst

Harry Teodoulou
Harry Theodoulou
Twitter Strona główna

Nowoczesny sposób

Korzystanie z interfejsu Async Clipboard API

Aby automatycznie odczytać tekst ze schowka użytkownika, na przykład po kliknięciu przycisku, możesz użyć metody readText() Async Clipboard API. Jeśli uprawnienia do odczytu schowka nie zostały jeszcze przyznane, wywołanie metody navigator.clipboard.readText() zażąda przy pierwszym wywołaniu metody.

const pasteButton = document.querySelector('#paste-button');

pasteButton.addEventListener('click', async () => {
   try {
     const text = await navigator.clipboard.readText()
     document.querySelector('textarea').value += text;
     console.log('Text pasted.');
   } catch (error) {
     console.log('Failed to read clipboard');
   }
});

Obsługa przeglądarek

  • 66
  • 79
  • x
  • 13.1

Źródło

Klasyczny sposób

Jak korzystać z aplikacji document.execCommand()

document.execCommand('paste') pozwala wkleić zawartość schowka w miejscu wstawiania (obecnie zaznaczonym elementem HTML). Metoda execCommand zwraca wartość logiczną, która wskazuje, czy zdarzenie paste zakończyło się powodzeniem. Ta metoda ma jednak pewne ograniczenia, np. dlatego, że jest synchroniczna, przez co wklejenie dużej ilości danych może zablokować stronę.

pasteButton.addEventListener('click', () => {
  document.querySelector('textarea').focus();
  const result = document.execCommand('paste')
  console.log('document.execCommand result: ', result);
})

Obsługa przeglądarek

  • 1
  • 12
  • 1
  • 1.3

Źródło

Stopniowe ulepszanie

pasteButton.addEventListener('click', async () => {
   try {
     const text = await navigator.clipboard.readText()
     document.querySelector('textarea').value += text;
     console.log('Text pasted.');
   } catch (error) {
     console.log('Failed to read clipboard. Using execCommand instead.');
     document.querySelector('textarea').focus();
     const result = document.execCommand('paste')
     console.log('document.execCommand result: ', result);
   }
});

Więcej informacji

Prezentacja

HTML

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="utf-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1" />
    <link
      rel="icon"
      href="data:image/svg+xml,<svg xmlns=%22http://www.w3.org/2000/svg%22 viewBox=%220 0 100 100%22><text y=%22.9em%22 font-size=%2290%22>🎉</text></svg>"
    />
    <title>How to paste text</title>
  </head>
  <body>
    <h1>How to paste text</h1>
    <p>
      <button type="button">Paste</button>
    </p>
    <textarea></textarea>
  </body>
</html>

CSS


        :root {
  color-scheme: dark light;
}

html {
  box-sizing: border-box;
}

*,
*:before,
*:after {
  box-sizing: inherit;
}

body {
  margin: 1rem;
  font-family: system-ui, sans-serif;
}

button {
  display: block;
}

JS


        const pasteButton = document.querySelector('button');

pasteButton.addEventListener('click', async () => {
  try {
    const text = await navigator.clipboard.readText()
    document.querySelector('textarea').value += text;
    console.log('Text pasted.');
  } catch (error) {
    console.log('Failed to read clipboard. Using execCommand instead.');
    document.querySelector('textarea').focus();
    const result = document.execCommand('paste')
    console.log('document.execCommand result: ', result);
  }
});