jQuery Dersleri

jQuery ile Textarea Yüksekliğini Otomatikleştirme

Bu eğitimde, jquery ile textarea alanının yüksekliğini otomatik olarak ayarlanmasından bahsedeceğim. Bildiğiniz gibi textarea alanını uzun bir yazı eklediğinizde sağ tarafta çıkan scroll ile textarea alanını kaydırmanız gerekecektir. Bu durum çokta kötü değil aslında. Fakat bu alanları daha etkili kullanmak için yazı doğrultsunda textarea alanının yüksekliğini arttırmak bir çok işleri kolaylaştıracaktır. Aynı zamanda görsel olarakta etkileyici bir his bırakacaktır.

Textarea alanının yüksekliğini otomatik olarak ayarlamak için ilk olarak sayfamıza jQuery kütüphanesini dahil ediyoruz.

<script src="https://code.jquery.com/jquery-3.4.1.min.js"></script>

Sonrasında işlemlerin yürütüleceği textarea bölümünü hazırlayalım.

<textarea class="otomatikYap"></textarea>

Yukarıdaki script ve textarea eklemesi ile sayfamızı hazırlamış olduk. jQuery kütüphanesi kullanarak yükseklik işleminin otomatik olarak ayarlanmasını sağlamalıyız. Bunu da aşağıdaki başlık altında hazırlayalım.

jQuery Kodları

Textarea etiketine ulaşıp, otomatik yükseklik değerini sağlamak için aşağıdaki adımları gerçekleştirmek gerekmektedir. Adımlar sonrasında jquery kodlarına göz atabilirsiniz.

  • Sayfa yüklendiğinde gizli bir DIV oluşturuyoruz. Bu div alanı textarea içerisine yazılan değerleri barındıracaktır.
  • Textarea alanına yazı yazılmaya başlandığında keyup ile alınmaktadır. Alanınan bu değer gizli DIV etiketine eklenir.
  • Gizli DIV etiketinin yüksekliği hesaplanarak textarea için bu yükseklik değeri uygulanır.

Bu kadar basit aslında. Şimdi de jQuery kodlarına geçerek maddeler halinde anlatmış olduğumu kod üzerinde gerçekleştirelim.

<script>
$(function(){
   // textarea alanına ulaşıyoruz.
   var textarea   = $('.otomatikYap'),
   // bir div oluşturduk
   gizliDiv       = $(document.createElement('div')),
   // taşıyıcımızı tanımladık
   otomatikYap    = null;
   // textarea için class atadık. Scrol çıkmaması için.
   textarea.addClass('noscroll');
   // div için class atadık. Hidden verebilmek için.
   gizliDiv.addClass('hiddendiv');
   // textareadan sonra gizli divi ekledik.
   $(textarea).after(gizliDiv);
   // textareaya yazıldığında tetiklendik
   textarea.on('keyup', function(){
      // içeriği aldık
      otomatikYap = $(this).val();
      // \n leri <br> yaptık
      otomatikYap = otomatikYap.replace(/\n/g, '<br>');
      // html ile div etiketine ekledik. En sona BR atadık.
      gizliDiv.html(otomatikYap + '<br class="lbr">');
      // yüksekliği alıp textarea için uyarladık.
      $(this).css('height', gizliDiv.height());
   });
});
</script>

Maddeler halinde çalışma prensibini anlatmıştım. Yukarıdaki kodlarda da tam olarak bu maddelere uygun olarak hazırladım. Mantık oldukça basit. Textareadaki yazıları gizli bir div etiketine atıyoruz. Sonrasında bu div etiketinin yüksekliğini hesaplayıp, textarea için uyguluyoruz. Bu kadar basit. Bu uygulama için birkaç CSS düzenlemesi de eklemek gerekecektir. Aşağıdaki başlıktan ulaşabilirsiniz.

CSS Kodları

Bu bölümde de addClass ile atadığımız değerlerin CSS kodlarını ve bir takım düzenlemeleri gerçekleştireceğiz.

<style>
textarea{
   width: 600px;
   min-height: 60px;
   font-family: Arial, sans-serif;
   font-size: 13px;
   color: #444;
   padding: 5px;
}
.noscroll{
   overflow: hidden;
   resize: none;
}
.hiddendiv{
   display: none;
   white-space: pre-wrap;
   width: 500px;
   min-height: 50px;
   font-family: Arial, sans-serif;
   font-size: 13px;
   padding: 5px;
   word-wrap: break-word;
}
.lbr {
   line-height: 3px;
}
</style>

Düzenlemelerle birlikte otomatik yükseklik değerine sahip bir textarea alanı oluşturmuş oluyoruz. Gerekli düzenlemeler ile daha farklı sonuçlar elde edebilirsiniz.

Daha Fazla Göster

İlgili Makaleler

Kapalı