Metin nasıl yapıştırılır?

Harry Theodoulou
Harry Theodoulou

Modern yöntem

Async Clipboard API'yi kullanma

Kullanıcının panosundaki metni programatik olarak okumak için (ör. bir düğmeyi tıkladıktan sonra) Async Clipboard API'nin readText() yöntemini kullanabilirsiniz. Panoyu okuma izinleri henüz verilmediyse navigator.clipboard.readText() çağrısı, yönteme yapılan ilk çağrıda bu izinleri ister.

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

Tarayıcı Desteği

  • 66
  • 79
  • x
  • 13.1

Kaynak

Klasik yöntem

document.execCommand() kullanılıyor

document.execCommand('paste') kullanarak pano içeriğini ekleme noktasına (o sırada odaklanılan HTML öğesi) yapıştırabilirsiniz. execCommand yöntemi, paste etkinliğinin başarılı olup olmadığını gösteren bir boole döndürür. Ancak bu yöntemin bazı sınırlamaları vardır. Örneğin, eşzamanlı olduğu için büyük miktarda veri yapıştırmak sayfayı engelleyebilir.

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

Tarayıcı Desteği

  • 1
  • 12
  • 1
  • 1.3

Kaynak

Progresif geliştirme

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

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