Input Metni Kopyala Butonu

Bu yazımda Javascript ile input, textarea gibi form elemanları içindeki veriyi kopyalayan bir buton yapımı örneğinden bahsettim. Detaylar için yazımı kontrol edebilirsiniz.

Merhabalar,

Bu yazımda Javascript ile input, textarea gibi form elemanları içindeki veriyi kopyalayan bir buton yapımı örneğinden bahsedeceğim. Bazı form girişlerinde kullanıcıya kolaylık sağlanması amacıyla kullanılmaktadır. Nasıl yapıldığını birlikte inceleyelim.

Bunun için 2 HTML öğesine ihtiyacımız olacak. Input ve Buton elementlerini oluşturalım. 

<input id="metin" type="text" value="Kopyalanacak Metin" />
<button onclick="kopyala()">Metni Kopyala</button> 

Gördüğünüz gibi basit bir yapı oluşturduk. Butona onclick eventinde çalışacak şekilde kopyala adında bir fonksiyon bağladık.

Javascript tarafında bu fonksiyon şu şekilde olacaktır;

function kopyala(){
    var metin = document.getElementById("metin");
    metin.select();
    document.execCommand("copy");
} 

Fonksiyonun içinde önce;

  1. id değerinden input elementini yakalayıp metin değişkenine atıyoruz.
  2. select() fonksiyonu ile form girişi yapılan element içindeki yazıyı seçiyoruz.
  3. Daha sonra Javascript tarafında bunu kopyalattırıyoruz.

İşlemlerimiz bu kadar. Basit bir kullanımı vardır. id değerlerinin eşleştiğinden emin olmanız yeterli.

Aşağıya test edebilmeniz ve inceleyebilmeniz için Codepen üzerinden örnek paylaşıyorum;

See the Pen Metin Kopyala by furkangiray.com (@furkangiray_com) on CodePen.

Umarım işinize yarar

Mutlu Kodlamalar 🙂

0 Shares:
4 comments

Benimle yorumunu paylaş;

Bunlara da göz atabilirsin
Butona Dalga Efekti Verme
Devamını Oku

Butona Dalga Efekti Verme

Çoğunlukla android cihazlarda veya materializecss.com üzerinde görebileceğiniz butona tıklandığında oluşan dalga efektinden bahsettim. Merak edenler için yazının devamını okuyabilirsiniz.

Devamını Oku