Cara menyalin teks

Joe Medley
Joe Medley
Twitter GitHub

Memotong dan menempelkan teks adalah salah satu fitur yang paling umum digunakan di aplikasi, umumnya dan pada aplikasi desktop. Bagaimana cara menyalin teks di web? Ada cara lama dan cara baru. Dan itu bergantung pada browser yang digunakan.

Cara modern

Menggunakan Async Clipboard API

Metode Clipboard.writeText() mengambil string dan menampilkan Promise yang akan di-resolve saat teks berhasil ditulis ke papan klip. Clipboard.writeText() hanya dapat digunakan dari objek window yang memiliki fokus.

Dukungan Browser

  • 66
  • 79
  • 63
  • 13,1

Sumber

Cara klasik

Menggunakan document.execCommand()

Memanggil document.execCommand('copy') menampilkan nilai boolean yang menunjukkan apakah penyalinan berhasil. Panggil perintah ini di dalam gestur pengguna, seperti pengendali klik. Pendekatan ini memiliki batasan jika dibandingkan dengan Async Clipboard API. Metode execCommand() hanya berfungsi dengan elemen DOM. Karena proses ini sinkron, menyalin data dalam jumlah besar, terutama data yang harus diubah atau dibersihkan dengan cara tertentu, dapat memblokir halaman.

Dukungan Browser

  • 1
  • 12
  • 1
  • 1,3

Sumber

{i>Progressive enhancement <i}

const copyButton = document.querySelector('#copyButton');
const out = document.querySelector('#out');

if ('clipboard' in navigator) {
  copyButton.addEventListener('click', () => {
    navigator.clipboard.writeText(out.value)
    .then(() => {
      console.log('Text copied');
    })
    .catch((err) => console.error(err.name, err.message));
  });
} else {
  copyButton.addEventListener('click', () => {
    const textArea = document.createElement('textarea');
    textArea.value = out.value;
    textArea.style.opacity = 0;
    document.body.appendChild(textArea);
    textArea.focus();
    textArea.select();
    try {
      const success = document.execCommand('copy');
      console.log(`Text copy was ${success ? 'successful' : 'unsuccessful'}.`);
    } catch (err) {
      console.error(err.name, err.message);
    }
    document.body.removeChild(textArea);
  });
}

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 copy text</title>
  </head>
  <body>
    <h1>How to copy text</h1>
    <textarea rows="3">
Some sample text for you to copy. Feel free to edit this.</textarea
    >
    <button type="button">Copy</button>
  </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 textarea = document.querySelector('textarea');
const button = document.querySelector('button');

button.addEventListener('click', async () => {
  try {
    await navigator.clipboard.writeText(textarea.value);
  } catch (err) {
    console.error(err.name, err.message);
  }
});