alaoglutasarım2022-12-27T16:13:03+03:00
Input Metni Kopyala Buton Yapımı
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 gözatalım.
Bunun için 2 HTML öğesine ihtiyacımız olacak. Input ve Buton elementlerini oluşturalım.
1 2 3 |
<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;
1 2 3 4 5 |
<span class="token keyword">function</span> <span class="token function">kopyala</span><span class="token punctuation">(</span><span class="token punctuation">)</span><span class="token punctuation">{</span> <span class="token keyword">var</span> metin <span class="token operator">=</span> <span class="token dom variable">document</span><span class="token punctuation">.</span><span class="token method function property-access">getElementById</span><span class="token punctuation">(</span><span class="token string">"metin"</span><span class="token punctuation">)</span><span class="token punctuation">;</span> metin<span class="token punctuation">.</span><span class="token method function property-access">select</span><span class="token punctuation">(</span><span class="token punctuation">)</span><span class="token punctuation">;</span> <span class="token dom variable">document</span><span class="token punctuation">.</span><span class="token method function property-access">execCommand</span><span class="token punctuation">(</span><span class="token string">"copy"</span><span class="token punctuation">)</span><span class="token punctuation">;</span> <span class="token punctuation">}</span> |
Fonksiyonun içinde önce;
- id değerinden input elementini yakalayıp metin değişkenine atıyoruz.
- select() fonksiyonu ile form girişi yapılan element içindeki yazıyı seçiyoruz.
- Daha sonra Javascript tarafında bunu kopyalattırıyoruz.
İşlemlerimiz bitti. Basit bir kullanımı vardır. id değerlerinin eşleştiğinden emin olmanız yeterli olacaktır.
İçeriği Puanlayabilirsiniz !
Değerlendirmek için yıldıza tıklayın!
Ortalama puan 0 / 5. Oy sayısı: 0
Şimdiye kadar oy yok! Bu gönderiyi ilk değerlendiren siz olun.