Cara menyalin teks

Joe Medley
Joe Medley
GitHub

Memotong dan menempelkan teks adalah salah satu fitur yang paling umum digunakan pada aplikasi secara umum dan aplikasi desktop khususnya. Bagaimana cara menyalin teks di web? Ada cara lama dan cara baru. Hal ini bergantung pada browser yang digunakan.

Cara modern

Menggunakan Async Clipboard API

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

Browser Support

  • Chrome: 66.
  • Edge: 79.
  • Firefox: 63.
  • Safari: 13.1.

Source

Cara klasik

Menggunakan document.execCommand()

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

Browser Support

  • Chrome: 1.
  • Edge: 12.
  • Firefox: 69.
  • Safari: 1.3.

Source

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