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

3:42 Php Dersleri

Count Komutu İle Verilerin Kaç Tane Olduğunu Bulmak

Kategori: Php Dersleri | 02.05.2013
5:27 Css Dersleri

Css ile Açılır Resimli Reklam Yapmak

Kategori: Css Dersleri | 04.05.2013
Html Dersleri

Google Translate İle Sitenizde Çoklu Dil Desteği Verin

Kategori: Html Dersleri | 23.06.2013
Php Dersleri
14:10 Php Dersleri

Php ile Dosya İçeriğine Yazı Yazma | Fwrite

Kategori: Php Dersleri | 03.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.