Cara menempelkan teks

Harry Theodoulou
Harry Theodoulou
Twitter Halaman beranda

Cara modern

Menggunakan Async Clipboard API

Untuk membaca teks dari papan klip pengguna secara terprogram, misalnya, setelah tombol diklik, Anda dapat menggunakan metode readText() dari Async Clipboard API. Jika izin untuk membaca papan klip belum diberikan, panggilan ke navigator.clipboard.readText() akan memintanya saat panggilan pertama ke metode.

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

Dukungan Browser

  • 66
  • 79
  • x
  • 13,1

Sumber

Cara klasik

Menggunakan document.execCommand()

Dengan menggunakan document.execCommand('paste'), Anda dapat menempelkan konten papan klip di titik penyisipan (elemen HTML yang saat ini difokuskan). Metode execCommand menampilkan boolean yang menunjukkan apakah peristiwa paste berhasil. Namun, metode ini memiliki batasan, misalnya karena metode ini sinkron, menempelkan data dalam jumlah besar dapat memblokir halaman.

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

Dukungan Browser

  • 1
  • 12
  • 1
  • 1,3

Sumber

{i>Progressive enhancement <i}

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

Bacaan lebih lanjut

Demo

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