Geçtiğimiz günlerde bir projede kullanacağım renkler için renk paletlerini inceliyordum. Colorhunt adresinde renkleri kontrol ederken, hoşuma giden bir rengin HEX kodunun üzerine tıkladığımda kopyalama işlemi yaptığını farkettim. Aynı özelliğin Github üzerinde repository linki kopyalama işlemi yaparken gerçekleştiğini hatırladım. Bende kopyalama işlemini nasıl yapabileceğimi öğrenmek için küçük bir araştırma yaptım.

İlk olarak basit bir şekilde HTML elemanlarımı ekliyorum:

• 
   
• 
      http://thatsthefinger.com
      Copy!
   
  

Butona tıklandığı anda aksiyon alabilmek için, button içerisine onclick metodunu ekliyorum:

Copy!

Butona tıklandıktan sonra kopyala fonksiyonunu çağıracağım. Herhangi bir id veya class kullanmadan, DOM üzerinden direkt burada bulunan elemanları kullanabilmek için, this anahtar sözcüğünü fonksiyona parametre olarak veriyorum. Şimdi adım adım fonksiyonumuzu oluşturalım.

function kopyala(element){
  var alan = element.parentElement.querySelector('a').innerHTML;
}

İçeriğime rahatça erişebilmek için, this anahtar sözcüğünü, fonksiyonu oluştururken element parametre ismini verdim. Şuan element parametresi ile direkt olarak tıkladığım button üzerindeki(parent) ve altındaki(child) elemanlara erişim sağlicam. Bir üstündeki elemanlara erişebilmek için parentElement ve burada bulunan a seçicisine erişebilmek için querySelector fonksiyonunu kullanıyorum. A etiketi içerisinde bulunan değeri alabilmek için innerHTML kullanıyorum. Bu noktada içeriği bir id veya class kullanarak da çekebilirdik. Birazdan birden fazla link ekleyeceğim için, ben bu şekilde almayı tercih ettim.

  Kopyalama işlemini yapabilmek için, bir textarea etiketine ihtiyacımız var. Textarea kullanmadan bu işlemi gerçekleştirmeye çalıştım, ancak anladığım kadarıyla panoya kopyalama işlemi için bir textarea kullanmamız gerekiyor. Şimdi bu etiketi oluşturalım:

var textAlani = document.createElement('TEXTAREA');

Yeni bir element oluşturabilmek için, createElement fonksiyonunu kullanabiliyoruz. Az önce çektiğim değeri textAlani değişkenime eklemek istiyorum, bunun için:

textAlani.value = alan;

Oluşturduğum textarea elemanını eklediğim değeriyle birlikte HTML içerisine gömmek için, appendChild() fonksiyonunu kullanicam:

document.body.appendChild(textAlani);

Kopyalama için olmazsa olmaz iki işlem yapmam gerekiyor.Birincisi, textarea içerisinde bulunan içeriği seçmem gerekiyor. Select() fonksiyonu ile bunu sağlayabilirim. Seçmeye çalıştığınız element textarea değilse, boşuna efor sarfetmeyim. Konsol üzerinde ‘.select() is not a function’ hatasıyla karşılaşacaksınız. İkincisi ise, execCommand() fonksiyonunun copy metodunu kullanmalıyım.

textAlani.select();
document.execCommand('copy');

Kopyalama işlemini gerçekleştirdik. Az önce appendChild() fonksiyonu ile eklediğim textarea elemanına sayfa üzerinde durmasıyla sinirimi ve zevkimi bozmaması için display özelliğini none olarak değiştiriyorum.

textAlani.style.display = 'none';

Oluşturduğumuz kodları derli toplu bir şekilde görelim:

function kopyalama(element){
  var alan = element.parentElement.querySelector('a').innerHTML;
  var textAlani = document.createElement('TEXTAREA');
  textAlani.value = alan;
  document.body.appendChild(textAlani);
  textAlani.select();
  document.execCommand('copy');
  textAlani.style.display = 'none';
}

HTML etiketleri içerisinde kopyalama yapılacak olan alana birkaç tane daha eleman ekliyorum:

• 
   
• 
      http://thatsthefinger.com/
      Copy!
   
   
• 
      http://tinytuba.com/
      Copy!
   
   
• 
      http://burymewithmymoney.com/
      Copy!
   
   
• 
      http://cant-not-tweet-this.com/
      Copy!
   
   
• 
      http://www.republiquedesmangues.fr/
      Copy!
   
   
• 
      http://www.fallingfalling.com/
      Copy!
   
  

Biraz da CSS ekleyerek nasıl bir forma büründüğünü kontrol edelim:

#kaynakca{
  border: 1px solid red;
  display: inline-block;
  padding: 40px;
  width: 40%;
}
  #kaynakca li{
    width: 100%;
    height: 20px;
    float: left;
    position: relative;
    margin: 10px;
    padding: 10px;
    border: 2px dotted #f76262  ;
    list-style-type: none;
  }    #kaynakca li a{
      float: left;
    }    #kaynakca li button{
      float: right;
    }

Kopyalama işlemini gerçekleştirdik. Yapmazsam içimde ukte olarak kalacak, bu yüzden colorhunt gibi bir renk paleti oluşturacam ve içerisinde bulunan HEX kodlarını kopyalama işlemini gerçekleştirmeye çalışıcam. Ama bu yazı fazla uzun olduğundan dolayı, diğer bir yazıda bu işlemi göstermek istiyorum. Diğer yazıda görüşmek üzere..

KAYNAKÇA:

    https://stackoverflow.com/questions/400212/how-do-i-copy-to-the-clipboard-in-javascript
    https://www.w3schools.com/howto/howto_js_copy_clipboard.asp
    https://www.w3schools.com/jsref/dom_obj_textarea.asp