Metin nasıl kopyalanır?

Ali Porsuk
Ali Polat
Twitter GitHub

Metin kesme ve yapıştırma, genel olarak uygulamaların ve özellikle de masaüstü uygulamalarının en sık kullanılan özelliklerinden biridir. Web'de nasıl metin kopyalarım? Hem eski hem de yeni bir yöntem var. Bu, hangi tarayıcının kullanıldığına bağlıdır.

Modern yöntem

Async Clipboard API'yi kullanma

Clipboard.writeText() yöntemi bir dizeyi alır ve metin panoya başarıyla yazıldığında çözümlenen bir Promise döndürür. Clipboard.writeText(), yalnızca odağın bulunduğu window nesnesinden kullanılabilir.

Tarayıcı Desteği

  • 66
  • 79
  • 63
  • 13.1

Kaynak

Klasik yöntem

document.execCommand() kullanılıyor

document.execCommand('copy') çağrılması, kopyalamanın başarılı olup olmadığını gösteren bir boole değeri döndürür. Bu komutu, tıklama işleyici gibi bir kullanıcı hareketinin içinde çağırın. Async Clipboard API ile karşılaştırıldığında bu yaklaşımda sınırlamalar söz konusudur. execCommand() yöntemi yalnızca DOM öğeleriyle çalışır. Eşzamanlı olduğundan, büyük miktarda verinin, özellikle de bir şekilde dönüştürülmesi veya temizlenmesi gereken verilerin kopyalanması sayfayı engelleyebilir.

Tarayıcı Desteği

  • 1
  • 12
  • 1
  • 1.3

Kaynak

Progresif geliştirme

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

Daha fazla bilgi

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