JS | Textarea Otomatik Küçültme

Merhaba arkadaşlar.
Facebook'ta Yorum yap kısmında textarea'daki yazı uzadıkça textarea'nın yüksekliği otomatik olarak büyüyor. Bende aynı şekilde buradaki örneğe bakarak yaptım. Ama ben textarea içindeki tüm yazılar silinince boyutunun eski haline dönmesini istiyorum yani yükseklik değeri yine css'de tanımlanan height:18px olsun. Ancak bu işlemi yapamadım. Nasıl yapabilirim?

Html

<!DOCTYPE html>
<html lang="en">
<head>
   <script type="text/javascript" src="jquery-2.2.3.min.js"></script>
   <style type="text/css">
     body { font-family: sans-serif; }
     textarea { height: 18px; margin: 5px; padding: 6px; width: 500px; resize: none; }
   </style>

<script type="text/javascript">
var max_height = 150;

$(document).ready(function() {

	jQuery.each(jQuery('textarea[data-autoresize]'), function() {
	var offset = this.offsetHeight - this.clientHeight;

	var resizeTextarea = function(el) {
		jQuery(el).css('height', 'auto').css('height', Math.min(max_height, el.scrollHeight + offset));
	};
	jQuery(this).on('keyup input', function() { resizeTextarea(this); }).removeAttr('data-autoresize');
	});

});
</script>

   <meta charset="UTF-8">
   <title>Anasayfa</title>
</head>
<body>
   <textarea data-autoresize placeholder="Type some text"></textarea>
</body>
</html>

 

<textarea data-autoresize placeholder="Metin Giriniz"></textarea>
var max_height = 100;

$(document).ready(function() {
	  
  jQuery.each(jQuery('textarea[data-autoresize]'), function() {
    var offset = this.offsetHeight - this.clientHeight;
 
    var resizeTextarea = function(el) {
        jQuery(el).css('height', 'auto').css('height', Math.min(max_height, el.scrollHeight + offset));
    };
    jQuery(this).on('keyup input', function() { resizeTextarea(this); }).removeAttr('data-autoresize');
});

});
body {
  font-family: sans-serif;
}

textarea {
  margin: 5px;
  padding: 5px;
  width: 80%;
  height: 38px;
}

 

Maalesef textarea hiç yazı yazılmamış haline geri dönmüyor.

Bizzat denedim çalışıyor. Jquery kütüphanesini (last update) import ettiğinizden emin olun. 

Evet bu şekilde ekledim

<script type="text/javascript" src="jquery-2.2.3.min.js"></script>

Şöyle anlatayım. Evet içindeki yazılar silince textarea boyutu küçülüyor. Ama sayfa css de tanımlanan değere dönmüyor. Sayfayı yenilersen o zaman css de belirtilmiş değere küçülüyor.

Cevap Yaz

Cevap yazabilmek için üye girişi yapmanız gerekiyor!

Yukarı Git