JavaScript ile Kopyalama İşlemleri

Herkese merhaba. Bu yazıda JavaScript ile kopyalama işlemlerinin nasıl yapılacağını anlatacağım. İngilizce yazısı burada yer alıyor.

Başlamadan önce şunu söyleyeyim, bu yazıda verdiğim bilgilerle oluşturulan bir NPM paketi var.

Test etmek için indirebilirsiniz

copy-simple

npm i copy-simple

Şimdi copy adında boş bir fonksiyon oluşturacağım. Bu fonksiyon doldurulduğu zaman bir elementin değerini, text’ini, html kodunu, secili degerini ya da mevcut url’yi kopyalamaya yardımcı olacak.

Tanımladığımız el argümanı querySelector fonksiyonu kullanılarak ilgili HTML elementini yakalamaya yardımcı olacak. Haliyle fonksiyonumuz da bir parça değişmiş olacak.

Şu anda herhangi bir şey içermeyen yeni fonksiyonlar var. Sorun değil, oluşturacağımız fonksiyon tamamen böyle bir yapıda olacak ve object dönecek.

Geçici Bir HTML Elementi Oluşturalım

Bir şeyleri kopyalamak istiyorsak bir HTML oluşturmamız gerekiyor. Bu textarea ya da input olabilir. Sıkıntı yok bu basit işlemi, ilk öğrendiğimiz JavaScript bilgileri ile halledebiliriz. saveClipBoard isimli bir fonksiyon oluşturmuştuk zaten. Bu fonksiyon ile oluşturduğumuz HTML elementi kopyalama işleminden hemen sonra silinecek. Boş yere yer kaplamasın.

saveClipBoard Fonksiyonunu Dolduralım

Oluşturacağımız fonksiyon şöyle olacak

Bu fonksiyonda data isimli argüman’ı text isimli bir değişkene atadık. Ayrıca dummy isimli bir değişkene atayarak da input elementi oluşturduk. Ardından bu elementin değerini select ediyoruz. Ardından da execCommand fonksiyonunu kullandık. Bu fonksiyon boolean bir değer dönecektir. Ardından da söylediğimiz gibi oluşturulan elementi siliyoruz.

Değerleri Almak

Diğer fonksiyonlar şöyle olacak

Bu fonksiyonlar anlaşılması kolay şeyler içeriyor. Anlatma gereksinimi duymuyorum ama belki bilmediğiniz getSelection isimli bir fonksiyon var. Mozilla bununla ilgili şunu söylüyor

Kullanıcı tarafından seçilen metnin aralığını ya da imlecin mevcut konumunu temsil eden bir Selection nesnesi döndürür

Hepsi bu kadar. Fonksiyonlarımızı doldurduk.

Hadi Test Edelim

Sizin için CodePen üzerinde basit bir pen oluşturdum. Fonksiyonu test etmek için butona tıklamalısınız.

Bu pende yer alan diğer fonksiyonları kullanabilirsiniz. Tabii o fonksiyonlar yorum satırları arasında yer alıyor. Umarım bu yazı size yardımcı olur.

Okuduğunuz için teşekkürler.