jQuery İle Textarea Alanına Dinamik Yükseklik Kazandırma

Bu makale dersimizde jQuery ile textarea alanlarına girilen değerin fazla olmasından dolayı aşağıya doğru yeniden nasıl boyutlanır bunu göreceğiz. Bu işlemi yapan birçok eklenti var fakat bazı gereksiz yapılardan dolayı çok büyük boyutlara sahip olan js dosyaları siteyi yavaşlatacaktır. Böylesi bir yavaşlık olmaması ve bunu eklenti değil de 2 - 3 kod ile nasıl yapacağımızı göreceğiz. Böylelikle az eklenti kullanarak sitemizi daha kullanışlı bir hızlılıkta sunacağız.

Kodlamamıza ve anlatımımıza başlayalım ve bu olayın aslında nasıl olduğuna bakalım. O havalı görünüşlü eklentilerden de kurtulalım.

İlk olarak bir textarea oluşturalım. Bu sizin sitenizde bulunan herhangi bir textareada olabilir. Gerekli düzenlemeler ile var olan textareanızı kullanabilirsiniz.

<textarea name="cevap"></textarea>

Şimdi basit bir yazı alanımız var. Bunu Css ile düzenleyelim ve ona göre uygulamamızı geliştirelim. Css kodumuz birkaç önemlilik taşımaktadır. Taşıdığı önem yükseklik değeri ve font yapısıdır. Eğer bir değişiklik yapılacaksa bu yükseklik ve font yapısıyla oynamak gerekmektedir.

textarea[name=cevap]{border:1px solid #ddd; width:500px;height:200px;padding:10px;font:14px/20px Arial; resize: none}

Şimdi projemiz yavaş yavaş şekillenmeye başladı. Asıl olayın yaşandığı o jQuery kodlarına geldi. Şimdi kodu direk yazacağım ve sonrasında ise gerekli birkaç açıklama yaparak ne yaptığımızı anlatmaya çalışacağım.

$(function(){
$('textarea[name=cevap]').keyup(function(){
var t = $(this).val().split('\n').length;
if ( t > 8){
$(this).css({height: 190 + ((t * 18) - 120)});
}else if ( t < 8 ) {
$(this).css({height: 200});
}
});
});

Şimdi yukarıda ne yaptığımı bir açıklayım. Keyup ile textarea alanına yapılan tuş basımını tespit ediyoruz. Burada t değişkeni ile enter tuşu ile yapılan alt satıra geçme işlemini alıyoruz. Aldıktan sonra sorgumuza başlıyoruz.

İf değerimizde 8 adet enter tuşuna basılmasından sonra; gerekli alanda bir matematiksel işlem ile o kadar yükseklik kazanmasını sağlıyoruz.

Else if ile de eğer 8 den küçükse standart yüksekliğe geri dön dedik. Buradaki 200pxlik yükseklik css ile gelen değerle aynıdır yani buna dikkat etmek gerekmektedir.

Basit anlamda textarea alanını bu şekilde yükseklik kazandırabiliriz.
EK DOSYA YOK
DEMOYU GÖRÜNTÜLE (106)
- 20.08.2013 / 17:37:09 2

Sosyal Medya Paylaşım Alanı

Bunlarda İlginizi Çekebilir

9:30 cURL Dersleri

cURL Parametreleri Açıklamaları | cURL Dersine Giriş

Kategori: cURL Dersleri | 03.05.2013
8:25 Php Dersleri

Mysql Limit Belirterek Veri Çekme

Kategori: Php Dersleri | 03.05.2013
Php Dersleri

Php ile Excel Dosyasından Veri Çekmek ve Kayıt Etme

Kategori: Php Dersleri | 03.08.2015
7:26 jQuery Dersleri

jQuery ile Renkli Listeleme Yapımı

Kategori: jQuery Dersleri | 03.05.2013
14:26 Php Dersleri

Cookie İşlemleri ve Üye Girişi Alanı Yapımı

Kategori: Php Dersleri | 02.05.2013

Yorum Listesi (1) # YorumYap

  • Aziz (22.03.2014 - 19:05:34)
    Teşekkürler. İşime yaradı... :)

Hadi Sende Yorum Yap!

Yorum Gönderilmiştir. Onaylandıktan Sonra Mesajınız Yayınlanacaktır.