jQuery ile otomatik boyutlanan textarea

Dikkat: Bu yazının yazılma tarihinin üzerinden en az 60 gün geçmiş. İçerisindeki bilgiler güncelliğini yitirmiş olabilir. Yorumları ve güncellemeleri göz önünde bulundurarak yazıyı takip ediniz.
Textarea her yerde kullandığımız bir form elementi ve sınırlandırılmış bir metin girdisini düşünmüyorsak textarea içine girilecek yazı teknik olarak oldukça uzun veya kısa olabilir. Genellikle bu boyut (o metin kutusuna girilebilecek ortalama tahmini uzunlugu), o textarea'nin yükseklik değerini belirler görsel olarak.

Örnek veriyorum ortalama olarak 3 cümlelik bir metin girildiğini tahmini olarak belirliyorsak 3 satır sığacak şekilde bir textarea hazırlarız ekrana. Ama uzun bir metin giriliyorsa görsel olarak ve sayfadaki kullanıcı deneyimi açısında iç içe kaydırılabilir elementler olması güzel bir deneyim değildir. Sonuçta textarea'yi uzun da olsa bir metinin girildiği bir kutu olarak düşünürsek, o kutunun metinin uzunluğuna göre değişiyor olması güzel bir kullanıcı deneyimi sunacaktır.

Birkaç farklı jquery plugini bulabilirsiniz bunun için, ben şu an mfyz.com'un ön yüzünde değil ama admin panel'de uzun süredir kullanıyorum kendi yazdığım bir jquery kodunu. Birkaç ay önce bir plugin ile değiştirmiştim kendi kodumu fakat kısa zaman önce başka bir plugin ile tekrar değiştirdim. Size son kullandığım plugin üzerindne bunu nasıl yapabileceğinizi göstereceğim. Açıkcası çok derin açıklama yapmama da gerek yok, plugin sayfasına gidip indirip tek satırlık bir tanımlama ile varolan bir textarea'nizi otomatik genişleyen bir textarea'ya dönüştürebilirsiniz.

http://www.jacklmoore.com/autosize adresinden jquery autosize plugin'ini test edebilirsiniz, sayfayı ziyaret edin ve güncel sürümü indirin.

jquery.autosize-min.js dosyasını projenizin assetlerine kopyaladıktan sonra sayfanıza include edin. Örnegin sayfanızda "comment" kimliğine sahip bir textarea olduğunu varsayalım.
<textarea id="comment"></textarea>

<script type="text/javascript">
$(function(){
  $('#comment').autosize();
});
</script>
Bu kod comment kimlikli textarea'nizi otomatik genişleyen bir textarea'ya dönüştürecektir. Hepsi bu kadar...

Daha pratik ve genelleştirerek bir sınıf tanımlayıp o sınıftaki tüm textarea'lari otomatik olarak bu plugin ile otomatik-yukseklik-ayarlanan textarea'lara dönüştürebilirsiniz:
<textarea id="txt1" class="autosize"></textarea>
<textarea id="txt2" class="autosize"></textarea>

<script type="text/javascript">
$(function(){
	$('textarea.autosize').each(function(){
		$(this).autosize();
	});
});
</script>
Plugin adresi:http://www.jacklmoore.com/autosize

Yorumlar

13 Haziran Çarşamba ´12 15:13
Kodladığım sosyal ağda yorum kutusu için lazımdı bu. Önce kendim kodlamaya çalıştım olmadı, sonra bir script buldum kuramadım. Sağol Mehmet abi bu çalıştı.

Kullanacak arkadaşlara şöyle bir uyarım olacak: sayfaya sonradan ajax vb. yöntemler ile eklenen textarealarını otomatik boyutlandırmıyor kod. Bu yüzden mesela yorumlar.php'de sayfanıza yorum kutusu geliyor diyelim. idsi yorum_kutusu_1 olsun. yorumlar.php'de javascript ile nesnenin tanınması için şu fonksiyonu tekrar çalıştırmalısınız:

<script>
$(function(){
  $('&#35;yorum_kutusu_1').autosize();
});
</script>

Kolay gelsin, teşekkürler.
Üye Resmi kadir düzel
24 Şubat Pazar ´13 15:17
Merhaba iyi akşamlar yukarıda açıklanan jquery autosize komutunu kullandım ancak herhangi bir metin yapıştırdığımda textarea içine autosize özelliği tetiklenmiyor. Sadece imleç textarea içindeyken klavyeden herhangi bir tuşa basınca autosize çalışıyor bu sorunu nasıl çözerim kolay gelsin şimdiden sağolun
Üye Resmi kadir düzel
24 Şubat Pazar ´13 15:25
Cevap verebilecek olan yok muu ?   :-(
25 Şubat Pazartesi ´13 02:07
Kadir Düzel, jQuery ve Fatihin belirtliği linkdeki kütüphaneyi indirip kaynak kodlarınız arasında head tagına eklediğinizden emin olun. Yukarıda kod parçacığı tetiklemeyi kendisi yapacaktır.

Buradan görünen autosize kütüphanesini head tagınız arasına source olarak eklememişsiniz gibi gözüküyor.
Üye Resmi kadir düzel
25 Şubat Pazartesi ´13 02:38
Bu kod <script type="text/javascript" src="jquery.autosize-min.js"></script> head tagları arasında zaten bundan eminim, otomatik boyutlandırma özelliği çalışıyo, sadece bir metni kopyalayıp textarea içine yapıştırdığım durumda özellik tetiklenmiyo, klavyeden herhangi bir tuşa basınca ancak özellik çalışıyo
Üye Resmi Burak
11 Temmuz Cumartesi ´15 20:15
Sizinki gibi Notepad görünümü nasıl verebilirim textarea ma ?
Yeni Yorum *
İletişim Bilgileri
*
*
E-Posta adresiniz gösterilmeyecektir.
(unut)
Güvenlik Kodu *

Gönderiliyor