在加載javascript時設置多個textarea元素的高度

在網頁上，我將設置幾個textarea元素的高度以匹配其內容。我嘗試了不同的方法，如在加載javascript時設置多個textarea元素的高度

var textarea = document.querySelectorAll('textarea'); 

$(document).ready(function(){ 
    for(var i = 0; i < textarea.length; i++){ 
    console.log("textarea="+textarea[i]); 
    $("textarea").height($("textarea")[i].scrollHeight); 
} 
});

但這種設置的第一個元素的高度，以最後一個元素的高度，可以看出here。

如何確保頁面上的每個textarea元素的高度設置爲適合加載的內容？

來源

2017-06-13 Yusef A.

嘗試使用.each() jQuery函數來遍歷所有的文字區域與選擇this結合，以選擇合適的textarea：

$(function(){ 
    $('textarea').each(function(){ 
     $(this).height($(this)[0].scrollHeight); 
    }); 
});

來源

2017-06-13 09:22:22 Zenoo

$("textarea").height將同時改變所有文字區域的高度在頁面上。因此，爲什麼你會得到它將它們全部設置爲最後一個高度的效果。

，如果你不混合jQuery和JS的語法很簡單：

var textAreas = $("textarea"); //get textAreas as a jQuery object 

//loop through all the jQuery textarea objects 
textAreas.each(function(index, element) { 
    var textArea = $(this); //select only the current textArea in the loop 
    textArea.height(textArea.get(0).scrollHeight); //.get(0) gets the underlying HTML element which has the scrollHeight property 
});

來源

2017-06-13 09:25:21 ADyson

$("textarea")找到您的網頁上的所有文字區域。所以通過設置$("textarea").height它將設置所有的高度。因此只有最後的變化實際上保持不變。

相反，我們可以遍歷數組，只調整當前的textarea。這可以用基本的javascript完成：

$(document).ready(function(){ 
    var textareas = document.querySelectorAll('textarea'); 
    for(var i = 0; i < textarea.length; i++){ 
     textarea[i].style.height = textarea[i].scrollHeight + "px"; 
    } 
});

看到它在這工作fiddle。

我知道我的解決方案並不像使用jQuery的.each()那樣乾淨，但它很容易理解，對於不使用jQuery的用戶來說很好。（但是請注意，$(document).ready(function() {應替換爲document.addEventListener("DOMContentLoaded", function(e) {

來源

2017-06-13 09:31:29

在加載javascript時設置多個textarea元素的高度

回答

相關問題