Misaliperver: Javascript Trick 1 - Copy Button

• İnput İçi Kopyalama Butonu

Benim kod yazarken sık sık kullandığım bir site var;  Webhook.site .
Orada görseldeki gibi url'i tek tuşla kopyalamanıza yarayan bir button var.
Mesela dosya.tc 'de bu işi input'a bir kez click yaptın mı, şıp diye kopyalıyor.

Peki bunu nasıl yapıyorlar. Aslında kodları gösterirken bir taraftanda işin arkaplanındaki mantığını anlatmaya çalışıyorum. Burada olay; javascript ve DOM nesnelerinin birbirleri ile sohbet edişlerinden ileri geliyor.
Sağ click, sol click, press anything, vs. browserda yaptığınız herşey olaydır. Evet biraz tikican tonlamasıyla vurguladım farkındayım "ama olay yani". Bu eventlerimiz bizim fonsiyonları tetiklememizi, yeni DOM'ları harekete geçirmemizi, yani manevra kabiliyetlerimizi oluşturur.

Bu örneğimizde biz butona basarız, bir click event'i oluşur, bizde bu eventimizi ilgili fonksiyonumuza yönlendirmişizdir, fonksiyonumuz input nesnesini bulur, seçili hale getirir ve kopyalar.
İşte Kodumuz Bu Kadar Basit;

<input type="text" value="Fatih Can KESER" id="nameInput" title="İsim giriniz" required />
<button onclick="copyFunction()">Kopyala</button>
<script>
   function copyFunction(){
        var copiedText = document.getElementById("nameInput");
        copiedText.select();
        document.execCommand("copy");
   }
</script>