在使用jQuery輸入時減少TextArea中文本的大小

Question

我有一個非常好的小函數，它可以在屏幕上顯示屏幕上顯示文本大小，如果它們開始溢出時，可以減少文本大小。

$(function(){ 
    $('div.Body').each(function (index) { 
     if ($('div.Body')[index].scrollHeight > 150) { 
      $('div.Body')[index].style.fontSize = 'small'; 
      if ($('div.Body')[index].scrollHeight > 150) { 
       $('div.Body')[index].style.fontSize = 'x-small'; 
       if ($('div.Body')[index].scrollHeight > 150) { 
        $('div.Body')[index].style.fontSize = 'xx-small'; 
       } 
      } 
     } 
    }); 
}) 

我想使用相同/相似的功能做的，而用戶鍵入的文本到文本區域時，他們提交的文字相同，但textarea的似乎並不具有scrollHeight屬性的功能：

$(function() { 
    window.status = $('.TextAreaClass').scrollHeight; 
}); 

該函數只返回undefined。

如何在textArea中完成此操作？

Answer 1

scrollHeight是一個本地JavaScript方法，而不是一個jQuery的一個，所以你需要做以下，以獲得textarea的scrollHeight：

window.status = $('.TextAreaClass')[0].scrollHeight; 

注意，返回的第一個元素的jQuery對象的[0] ，這是本地DOM元素。另外，你應該真的在當前的代碼中緩存選定的元素，以使其性能更好。試試這個：

$('div.Body').each(function (index) { 
    var div = $('div.Body')[index]; 
    if (div.scrollHeight > 150) { 
     div.style.fontSize = 'small'; 
     if (div.scrollHeight > 150) { 
      div.style.fontSize = 'x-small'; 
      if (div.scrollHeight > 150) { 
       div.style.fontSize = 'xx-small'; 
      } 
     } 
    } 
}); 

最後，該代碼的邏輯似乎有缺陷的，因爲所有的條件都檢查> 150？

Answer 2

只需使用this，而不是讓$('div.Body')[index]爲每次循環：

$('div.Body').each(function() { // Remove the redundant parameter 
    if (this.scrollHeight > 150) { 
     this.style.fontSize = 'small'; 
     if (this.scrollHeight > 150) { 
      this.style.fontSize = 'x-small'; 
      if (this.scrollHeight > 150) { 
       this.style.fontSize = 'xx-small'; 
      } 
     } 
    } 
}); 

在.each，this指$('div.Body')[index]。

而且，像Rory說的那樣，$('.TextAreaClass')返回一個jQuery對象。您可能需要使用$('.TextAreaClass')[0];來訪問該對象中的第一個DOM元素。