jQuery İle Textarea’ya 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.