Javascript İle Panoya Kopyalama Uygulaması

Merhaba,

Aslında bu son derece kolay bir uygulama. Bilmeniz gereken sadece iki şey var, execCommand ve select. Şimdi öncelikle olayın mantığını anlatayım.

Normalde bilgisayarımızda bir şeyi panoya kopyalarken önce onu seçeriz daha sonra da Command + C veya CTRL + C (İşletim sisteminize göre değişir tabi bu) tuş kombinasyonu ile kopyalarız. İşte bu örnekte de aynı şeyi yapacağız. Öncelikle kopyalamak istediğimiz içeriği alıp bir textarea içerisine atıyoruz. Ya da daha da basitleştirelim örneğimizi, bir textarea içerisine yazdığımız bir yazıyı kopyalayalım. Hemen bir textarea oluşturalım ve id’sine metin-alani yazalım. Hemen altına da bir buton koyalım.

<textarea id="metin-alani">
<br>
<button onclick="kopyala()">Kopyala</button>

Butonumuzun onclick özelliğine kopyala adında bir fonksiyon yazdık. Şimdi bu kopyala fonksiyonumuzun içeriğini girelim.

function kopyala() {
    document.getElementById('metin-alani').select(); // 1. Satir
    try {    
        document.execCommand('copy'); // 2. Satir
    } catch (err) {
        console.log(err + 'Kopyalama işlemi başarılı olmadı'); // 3. Satir
    }
}

Şimdi kodlarımızı açıklayalım. 1. satır şeklinde not düştüğüm satıra bakalım. Burada id özelliği aracılığıyla dökümanımızın içerisinden bir element seçiyoruz. Yani id değeri metin-alani olan elementin içeriğini seçiyoruz. Seçmekten kastım normal mouse ile 3 içerisindeki yazıyı seçmek.

Daha sonra bir try bloğu açıyoruz, eski tarayıcılarda çalışmama ihtimali olduğundan dolayı bir kontrol olması açısından.

2. satır yazan yerde de dökümanımızda bir komut çalıştırmak istediğimizi söylüyoruz ve daha sonra da bu komutun hangi komut olduğunu yazıyoruz. Burada copy komutunu çalıştırmak istediğimizi belirttik. Tabi bundan önce de textarea içerisindeki metni seçmiş olduğumuz için kopyala dediğimizde o seçmiş olduğumuz metni kopyaladı. Şimdi gönül rahatlığıyla istediğiniz yere yapıştırabilirsiniz 🙂 Çalışmazsa eğer hatayı konsola yazdıracaktır, hataya konsoldan bakabilirsiniz.

İşinize yaradıysa, beğendiyseniz vs. lütfen aşağıdaki butona basarak teşekkür edin 🙂 Bu sayede ben de ne kadar insana faydam dokunduğunu görüp mutlu olabilir, yeni içerikler üretmek için motive olabilirim.

Canlı Örnek: http://codepen.io/anon/pen/OWMmLa

Herkese iyi çalışmalar 🙂

Örnek Uygulamalar Mustafa Zahid Efe 1 Yorum