Question

我尝试使用纯javascript计算textarea行，但我不确定为什么我的selector.rows没有返回正确的行数:( 这是我的js：

var selector = document.querySelectorAll("textarea");

for(i = 0; i < selector.length; i++){
   var array = selector[i];
   var count = array.rows;
   console.log(array, count);
   if(count > 1 &&  count.scrollHeight < count.offsetHeight){
       count--
       console.log(array.rows);
   }else{
       count++
       console.log(array.rows);
   }
}

jsFiddle:

Answer 1

上面的代码运行正常，因为它旨在返回textbox显示的行数（rows的属性textarea）。但是你想要textarea中的文本占用的行数，这里是一个解决方案：

获取textarea的height（我使用了getComputedStyle()，因为未定义高度）
计算line-height（=身高/行）内容的textarea。
获取scrollHeight。{/ li>的textarea
通过将scrollHeight除以计算出的line-height来计算行数。

这将是这样的：

＆＃13;

var selector = document.querySelectorAll("textarea");

for(i = 0; i < selector.length; i++){
    
    var txtarea = selector[i];
    var count = txtarea.rows;
    
    // get the textarea height
    var cs = window.getComputedStyle(txtarea, null);
    var tHeight = parseInt(cs.getPropertyValue("height"));
  
    // calculate the line-height
    var tLineHeight = tHeight / count;
  
    // calculate the number of rows in the textarea
    var tRows = Math.round(txtarea.scrollHeight / tLineHeight);
  
    document.getElementById("results").innerHTML += "ROWS = " + tRows + "<br>";
    
}//end for

＆＃13;

<textarea rows="4" cols="40">
 Lorem ipsum dolor sit amet, eam ex bonorum scripserit. Audire diceret delectus ex usu. Sonet alienum duo id. Elit delenit pro ex, quo case honestatis eloquentiam ea, everti detracto intellegat no nam. Pro quodsi euismod qualisque ei. Est et modus porro, eam solet gubergren ea.

In soleat eleifend per, no per nibh mollis labitur. Sit ei possim molestiae, ius antiopam principes ei. Ea eam soleat fierent. Mel et quod veri convenire, vis no modus oporteat posidonium. Dicunt viderer vocibus his te, qui agam iriure pertinacia te. In sit homero facilisi iudicabit. Timeam eligendi sed an.


</textarea>

<textarea rows="4" cols="40">
 Hello
</textarea>

<div id="results"></div>

＆＃13;

您还可以在JSFiddle的变体中看到它：http://jsfiddle.net/qxKmW/46/（在这种情况下，请检查控制台日志）

使用此解决方案的一个问题：它将返回这两个中较高的值：

textarea内的内容行数;或
rows属性中定义的行数（或其默认值）。

这就是为什么在上面的示例中，第二个textarea将返回4而不是2。一个可能的解决方案是将rows属性设置为1，然后您将始终获得正确的值。

计算textarea行，显示，增加，减少

1 个答案: