Metin nasıl kopyalanır?

Joe Medley
Joe Medley
GitHub

Metin kesme ve yapıştırma, genel olarak uygulamaların ve özellikle masaüstü uygulamalarının en sık kullanılan özelliklerinden biridir. Web'de metni nasıl kopyalarım? Eski ve yeni bir yöntem vardır. Bu, kullanılan tarayıcıya da bağlıdır.

Modern yöntem

Async Clipboard API'yi kullanma

Clipboard.writeText() yöntemi bir dize alır ve metin panoya başarıyla yazıldığında çözülen bir Promise döndürür. Clipboard.writeText() yalnızca odaklanılmış window nesnesinden kullanılabilir.

Browser Support

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

Source

Klasik yöntem

document.execCommand() kullanılıyor

document.execCommand('copy') işlevini çağırmak, kopyalama işleminin 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ı hareketi içinde çağırın. Bu yaklaşım, Async Clipboard API ile karşılaştırıldığında sınırlamalara sahiptir. execCommand() yöntemi yalnızca DOM öğeleriyle çalışır. Senkronize olduğundan, özellikle bir şekilde dönüştürülmesi veya temizlenmesi gereken büyük miktarda verinin kopyalanması sayfayı engelleyebilir.

Browser Support

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

Source

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