Emre

Emre

WFN Üye
Konular
1,644
Mesajlar
1,740
Çözüm
0
Ticaret Puanı
0
Üyelik
9 Ay 3 Gün
Konum
Samsun
Web Sitesi
Var
Alanı
WordPress Uzm.
1/1
Konu sahibi
İşlem için en pratik yöntem, düğmenin click olayında navigator.clipboard.writeText() metodunu çağırmaktır. Kopyalanacak metni bu metoda verin, dönen Promise başarıyla tamamlanırsa kullanıcıya bilgi gösterin. Bu API’nin çalışması için sayfanın güvenli bağlamda, yani genellikle HTTPS üzerinden açılması gerekir; ayrıca işlem doğrudan kullanıcının düğme tıklamasıyla başlatılmalıdır.

Çalışan en küçük örnek​


Aşağıdaki örneği bir HTML dosyasına kaydedip tarayıcıda açabilirsiniz. Düğmeye basıldığında JavaScript, belirlenen metni panoya yazar ve işlem başarılıysa düğmenin yazısını kısa süreliğine değiştirir.

HTML: 
<!doctype html>
<html lang="tr">
<head>
  <meta charset="UTF-8">
  <title>Panoya metin kopyalama</title>
</head>
<body>
  <button id="copyButton" type="button">Metni kopyala</button>
  <p id="message" role="status"></p>

  <script>
    const copyButton = document.querySelector('#copyButton');
    const message = document.querySelector('#message');

    copyButton.addEventListener('click', async () => {
      const text = 'Bu metin panoya kopyalandı.';

      try {
        await navigator.clipboard.writeText(text);
        message.textContent = 'Metin panoya kopyalandı.';
      } catch (error) {
        message.textContent = 'Metin kopyalanamadı.';
        console.error('Pano kopyalama hatası:', error);
      }
    });
  </script>
</body>
</html>

Dosyayı açtıktan sonra Metni kopyala düğmesine basın ve başka bir metin alanında yapıştırma işlemi yapın. Yapıştırılan içerik Bu metin panoya kopyalandı. ise işlem tamamlanmıştır. Başarı mesajı yalnızca JavaScript çağrısının başarılı olduğunu gösterir; metnin hedef uygulamada biçimlendirilmiş olarak görüneceğini garanti etmez. writeText() yalnızca düz metin yazar.

Bir input veya textarea içeriğini kopyalama​


Kopyalanacak içerik sabit bir metin olmak zorunda değildir. Bir textarea veya input içindeki güncel değeri okuyup aynı metoda gönderebilirsiniz.

HTML: 
<textarea id="textToCopy">Kopyalanacak içerik burada.</textarea>
<button id="copyButton" type="button">Kopyala</button>
<p id="message" role="status"></p>

<script>
  const textToCopy = document.querySelector('#textToCopy');
  const copyButton = document.querySelector('#copyButton');
  const message = document.querySelector('#message');

  copyButton.addEventListener('click', async () => {
    try {
      await navigator.clipboard.writeText(textToCopy.value);
      message.textContent = 'Alan içeriği panoya kopyalandı.';
    } catch (error) {
      message.textContent = 'Kopyalama başarısız oldu.';
      console.error(error);
    }
  });
</script>

Burada textToCopy.value düğmeye basıldığı andaki içeriği alır. Kullanıcı metni değiştirdikten sonra düğmeye basarsa yeni içerik kopyalanır. Bu nedenle metni sayfa yüklenirken ayrı bir değişkende saklamak yerine tıklama sırasında okumak, düzenlenebilir alanlar için daha doğru yaklaşımdır.

Kopyalama sonucunu nasıl yorumlamalısınız?​



Durum | Anlamı | Yapılacak işlem

Promise başarıyla tamamlanıyor | Tarayıcı metni sistem panosuna yazmayı kabul etti. | Başarı mesajı gösterin; gerekiyorsa düğme metnini eski hâline getirin.

NotAllowedError veya benzeri hata | Tarayıcı, sayfanın pano yazma koşullarını karşılamadığını veya erişime izin verilmediğini bildirir. | HTTPS, kullanıcı tıklaması ve tarayıcı izinlerini kontrol edin.

Başarı mesajı görünüyor fakat beklenen metin yapışmıyor | Kod çağrısı tamamlanmış olsa da kopyalanan değişken yanlış olabilir veya hedef uygulama içeriği farklı yorumlayabilir. | Kopyalamadan hemen önce kullanılan değeri konsolda inceleyin ve düz metin yapıştırma ile tekrar deneyin.


Başarı ve hata durumlarını try...catch ile ayırmanız önemlidir. writeText() bir Promise döndürdüğü için await kullanılmadan hemen başarı mesajı göstermek yanıltıcı olabilir; mesajı ancak işlem tamamlandıktan sonra güncelleyin. Metodun reddedilmesi, metnin kesinlikle yanlış olduğu anlamına gelmez; tarayıcının yazma işlemini güvenlik nedeniyle engellediğini gösterir.

Kopyalama çalışmıyorsa kontrol edilecek noktalar​


İlk olarak sayfanın adres çubuğunda https:// kullandığını kontrol edin. Async Clipboard API güvenli bağlam gerektirir. Yerel geliştirmede localhost çoğu tarayıcıda güvenli geliştirme bağlamı olarak ele alınabilir; gerçek alan adında ise HTTPS sertifikasının etkin olması gerekir. HTTP üzerinden yayınlanan bir sayfada navigator.clipboard bulunmayabilir veya yazma çağrısı reddedilebilir.

İkinci olarak çağrının bir kullanıcı etkileşiminden geldiğinden emin olun. Aşağıdaki kullanım doğrudur:

JavaScript: 
button.addEventListener('click', async () => {
  await navigator.clipboard.writeText('Kopyalanacak metin');
});

Buna karşılık sayfa açılır açılmaz otomatik kopyalama denemek tarayıcı tarafından engellenebilir. Kullanıcının düğmeye basması, pano işlemi için gereken geçici kullanıcı etkileşimini sağlar; tarayıcılar bu alanda ek izin ve güvenlik kuralları uygulayabilir.

Üçüncü olarak düğmenin gerçekten seçildiğini ve olay dinleyicisinin çalıştığını kontrol edin. Geliştirici araçlarının konsoluna şu satırı geçici olarak ekleyebilirsiniz:

JavaScript: 
console.log('Kopyalanacak değer:', textToCopy.value);

Bu satır doğru metni göstermiyorsa sorun pano API’sinde değil, yanlış öğenin seçilmesinde veya yanlış özelliğin okunmasındadır. input ve textarea için genellikle .value, normal bir HTML öğesinin metni için ise .textContent kullanılır.

Eski yöntem ne zaman düşünülür?​


Yeni kodlarda navigator.clipboard.writeText() tercih edilmelidir. document.execCommand('copy') eski ve kullanımdan kaldırılmış bir yaklaşımdır; yalnızca eski bir projeyi desteklemek veya modern API’nin bulunmadığı özel bir ortam için geriye dönük çözüm gerekirse ayrıca değerlendirilir. Modern tarayıcı hedefleyen bir uygulamada önce HTTPS, kullanıcı tıklaması ve hata yakalama koşullarını düzeltmek daha doğru adımdır.

Sık sorulan sorular​

Kopyalama için kullanıcıdan ayrıca izin istemeli miyim?​

Genel bir metin kopyalama düğmesinde önce navigator.clipboard.writeText() çağrısını kullanıcı tıklaması içinde yapın ve hatayı yakalayın. Tarayıcı; güvenli bağlam, kullanıcı etkileşimi, izinler ve gömülü çerçeve politikaları gibi koşullara göre işlemi kabul edebilir veya reddedebilir. Kod içinde her tarayıcı için aynı izin penceresinin açılacağını varsaymayın.

Kullanıcı metni görmeden doğrudan kopyalamak güvenli midir?​

Kopyalanacak metni uygulamanızın belirlediği ve kullanıcı tarafından beklenen içerikle sınırlayın. Pano yazma işlemi sistem panosundaki mevcut içeriğin üzerine yazar; bu nedenle kopyalama düğmesinin hangi metni aktaracağını arayüzde açıkça belirtmek, beklenmeyen veri kaybını önler.

Resim veya biçimlendirilmiş HTML de kopyalanabilir mi?​

Evet, daha gelişmiş pano işlemleri için navigator.clipboard.write() ve ClipboardItem kullanılabilir. Ancak yalnızca metin kopyalanacaksa writeText() daha basit ve uygun yöntemdir. write() ile yazılan biçimlerin desteklenmesi, tarayıcıya ve hedef uygulamaya göre değişebilir.
 

Sende şimdi bize katılmak ister misin?

Kayıt ol

Bize katılım kolay ve ücretsizdir!

Üye ol
Foruma git ?

Bu konuyu görüntüleyen kullanıcılar

Bu konuyu şu anda görüntüleyen üye bulunmuyor.
Robotlar:
  • Anthropic
Toplam: 1 (Üye: 0, misafir: 0, robot: 1)