Question

我有这个方法：

autogrow(){

 var tareas=document.getElementsByTagName('textarea')

    for(let i = 0; i< tareas.length; i++){
        tareas[i].style.height = (tareas[i].scrollHeight - 10)+"px";
    }

}

其中一些有两行文本，其中一些有一个。我想为所有textarea获得那些heigts的价值并改变它们的大小。任何建议我怎么能这样做？在我的情况下，它现在所有textarea都有相同的高度。

Answer 1

你可以通过获取具有特定字体大小的像素的字符串长度并将此长度与textarea宽度进行比较来实现此目的

function getWidthOfText(txt, fontname, fontsize){
  // Create a dummy canvas (render invisible with css)
  var c=document.createElement('canvas');
  // Get the context of the dummy canvas
  var ctx=c.getContext('2d');
  // Set the context.font to the font that you are using
  ctx.font = fontsize + fontname;
  // Measure the string 
  // !!! <CRUCIAL>  !!!
  var length = ctx.measureText(txt).width;
  // !!! </CRUCIAL> !!!
  // Return width
  return length;
}

Answer 2

我在这个解决方案中做了以下假设：

您正在使用“rows”属性来设置每行中的行数文字区域
您在每个文本区域使用相同的字体
您希望文本区域的大小与具有最大行数的文本区域相同。
您已将文本区域存储为某个阵列

假设所有这一切都是真的，我提供了这个JavaScript解决方案：

function adjustAllTextAreas() {
    // Replace the following line with your text area storage
    var textAreas = Array.from(document.getElementsByClassName("example"));
  var maxRows = 0;


    textAreas.forEach(function(item, index){
    if (item.rows > maxRows) {
        maxRows = item.rows;
    }  
  })

  textAreas.forEach(function(item, index){
    item.rows = maxRows;
  })

}

如何获得每个textarea的高度值？

2 个答案: