5.00 / 1 oy

Butona tıklayarak yazının tamamını Clipboard'a kopyalamak (Html+Javascript)

Önceki soruma ilave etmek istemedim ancak google translate'te olduğu gibi bir div ya da input/textarea içerisindeki tüm yazıyı kopyalayarak clipboard'a (panoya) kopyalayan bir buton eklemek istiyorum. Javascript ya da JQuery her ikisi için de göndereceğiniz çözümler benim için uygundur.

<p class="icerik">Bu id'ye sahip bir html etiketi içerisindeki tüm yazıları bir butona tıklayarak tek seferde panoya kopyalamak istiyorum</p>
<button class="kopyala">Tümünü panoya kopyala</button>

html panoya kopyala

dağhan

02.07.2019 10:59

Bu soru 2 kez yanıtlandı.

  • 2 Temmuz 2019 14:26
    54

    document.execCommand("copy") komutu ile tüm güncel tarayıcıların da destekleyeceği bir şekilde istediğiniz alanların panoya kopyalanmasını sağlayabilirsiniz.

    Farklı olarak, kopyalamak istediğiniz alanın p gibi bir Html elemanı olduğunu anlıyorum. Dolayısıyla bold olabilir ya da farklı bir Html özelliği de olabilir. Hazır yapmışken tasarımını da panoya kopyalayan biir örnek yapalım madem :)

    Önce Javascript ile, sonra ise JQuery ile aynı uygulamanın alternatif kullanımını paylaşıyorum:

    1. Yöntem: HTML + CSS + Javascript ile örnek:

    HTML:

    <p id="kaynak">Buradaki <b>tüm yazıları</b> bir butona tıklayarak tek seferde panoya kopyalamak istiyorum.</p>
    <button onclick="kopyala('kaynak')" id="">Tümünü panoya kopyala</button> 
    
    <div id="denemeAlani" contentEditable="true"></div>

    CSS:

    #denemeAlani {
      margin-top:20px;
      height:50px;
      border:1px solid black;
    }

    Javascript:

    function kopyala(elemanID){
      var cop = document.createElement("div");
      cop.setAttribute("contentEditable", true);
      cop.innerHTML = document.getElementById(elemanID).innerHTML;
      cop.setAttribute("onfocus", "document.execCommand('selectAll',false,null)"); 
      document.body.appendChild(cop);
      cop.focus();
      document.execCommand("copy");
      document.body.removeChild(cop);
    }

    Çıktı:

    html tümünü panoya kopyala

    Demo Linki

    Bu uygulama ile tümünü panoya kopyala butonu tıklandığında, kaynak id'si içerisindeki tüm alan, Html tasarımıyla birlikte panoya kopyalanmış olacaktır. Aşağıdaki denemeAlani id'li alana da ctrl+v yaparak kopyaladığınız alanı yapıştırmayı deneyebilirsiniz.

    Alternatif olarak JQuery kullanmak isterseniz, bu kodu da Javascript alanının olduğu yere yapıştırabilirsiniz. Elbette jquery.js dosyasını da import etmeyi unutmamalısınız.

    function kopyala(elemanID){
      var $cop = $("<div>");
      $("body").append($cop);
      $cop.attr("contenteditable", true)
           .html($(elemanID).html()).select()
           .on("focus", function() { document.execCommand('selectAll',false,null) })
           .focus();
      document.execCommand("copy");
      $cop.remove();
    }

    Her iki kod da mantık olarak geçici bir değişken yaratıyor ve sonrasında da geri kaldırıyor.

  • 17 Haziran 2020 01:56
    16

    Şu metod ile clipboard içine id seçerek ilgili div içindeki yazıları html biçiminde attım:

    function kopyala(elemanID) {
        var str = document.getElementById(elemanID).innerHTML;
        
        function listener(e) {
            e.clipboardData.setData("text/html", str);
            e.clipboardData.setData("text/plain", str);
            e.preventDefault();
        }
        
        document.addEventListener("copy", listener);
        document.execCommand("copy");
        document.removeEventListener("copy", listener);
    }

     

Bu soruya sadece kayıtlı kullanıcılar yanıt yazabilirler. Yanıt yazmak için lütfen giriş yapınız.

Reitix
Butona tıklayarak yazının tamamını Clipboard'a kopyalamak (Html+Javascript)

İnternet sitemizdeki deneyiminizi iyileştirmek için çerezler kullanıyoruz. Bu siteye giriş yaparak çerez kullanımını kabul etmiş sayılıyorsunuz. Daha fazla bilgi.