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

Bu soru 2 kez yanıtlandı.

• bill gates

  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ı:

  

  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.

• RainingCodes

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