Javascript Kopyalama Kodu

Web sitelerinde kullanıcı deneyimini artırmak için sıkça kullanılan işlevlerden biri de, bir metni panoya kopyalamaktır. "Copy to clipboard" yani "Panoya Kopyala" işlemi sayesinde, kullanıcılar bir metni kolayca kopyalayabilir ve diledikleri yere yapıştırabilirler.

Aşağıda, sayfa içerisindeki belirli bir HTML elemanının (örneğin bir paragraf ya da açıklama bloğu) içeriğini panoya kopyalamayı sağlayan bir örnek bulacaksınız. Ayrıca örnekte, kopyalanan metnin bir metin kutusuna yapıştırılarak test edilmesi de mümkündür.

✅ Kopyalama İşlevi Nasıl Çalışır?

Aşağıdaki modern JavaScript fonksiyonu, navigator.clipboard API'sini kullanır. Bu yöntem, eski document.execCommand("copy") metoduna kıyasla daha güvenli ve günceldir:

<script>

function copyContent() {

  const content = document.getElementById("kopya").innerText;

  navigator.clipboard.writeText(content)

    .then(() => {

      alert("İçerik başarıyla panoya kopyalandı!");

    })

    .catch(err => {

      console.error("Kopyalama sırasında bir hata oluştu: ", err);

      alert("Maalesef içerik kopyalanamadı. Tarayıcınız bu özelliği desteklemiyor olabilir.");

    });

}

function copySelectedContent(){

if (window.getSelection) {

           var range = document.createRange();

            window.getSelection().addRange(range);

            document.execCommand("copy");

            alert("Panoya Kopyalandı")

        } 

}

</script>

JavaScript ile web sayfasındaki bir metni tıklayarak panoya kopyalamak mümkündür. Aşağıdaki butona bastığınızda bu metin panoya kopyalanır. İstediğiniz yere yapıştırarak test edebilirsiniz.

Saygılarımla,
Turgut Arslan