9

可能重复：
如何获取 <textarea > 中的行数？

我有一个textarea，我7 lines只2 new line character用下面这样写，想象下面的代码框是一个textarea，并且只按下了两次回车键。

 A text box, text field or text entry box is a kind of widget used when building
 a graphical user interface (GUI). A text box purpose is to allow the user to
 input text information to be used by the program.
 User-interface guidelines recommend a single-line text box when only one line of
 input is required, and a multi-line text box only if more than one line of input
 may be required.
 Non-editable text boxes can serve the purpose of simply displaying text.

textarea line count如果现在是多写几行之后n。如何计算 的值n？

回答问题前请先说清楚。我不想数new line characters像这样的文字中有多少。如何获取文本区域中的行数？

我想计算行数，就像Microsoft Word从段落中计算它一样。

请不要 jQuery...

4

1 回答 1

3

你可以试试这个。到目前为止我还没有测试它，但我记得这应该可以正常工作。

var lineHeight = document.getElementById("yourTextarea").style.lineHeight;
var scrollHeight = document.getElementById("yourTextarea").scrollHeight;
document.getElementById("yourTextarea").style.height = scrollHeight; // this is just for showing purposes
var numLines = Math.floor( scrollHeight / lineHeight );

这应该是我认为最简单的方法。

编辑

所以这就是答案，就像它一样简单：D

首先让舒尔给 textarea 一个cols的值

现在检查一下=

<textarea id="mytext" cols="10" rows="12">
</textarea>
<input type="button" value="Count Rows" onclick="countRows();"/>
<script type="text/javascript">
function countRows() {
    var stringLength = document.getElementById("mytext").value.length;
    var count = Math.ceil( stringLength / document.getElementById("mytext").cols ); 
    // just devide the absolute string length by the amount of horizontal place and ceil it
    alert( count );
}
</script>

现在这应该可以正常工作了。

更新

您还可以确保在获取长度之前删除所有“新行”元素或仅删除最后一个字符（如果它是字符串中的“新行”）。这样就不会计算不需要的额外行。

还要确保不要设置文本框的“宽度”！这将导致一行中的文本比“cols”的值更远。这样，“计数”值将为您提供行数，如果最大行宽度为 cols 值。所以使用 cols 属性设置文本框宽度的唯一方法。

更新 2

我认为，如果您想要一种非错误的方式，则无法使用 PHP 或 jQuery。

第二种解决方案也只是一种快速而肮脏的方式。您必须编写一个逻辑来检查每个单词是否长于可离开的宽度，并检查每一行是否存在由于空间不足而被放到下一行的单词。

这将需要一些逻辑技能，并且由于不活动，我现在不会编写代码。

如果您希望我发布完整的 Javascript、PHP 或 jQuery 解决方案，请告诉我。（我看不出有什么理由不为此使用 jQuery）

于 2012-11-22T20:23:33.277 回答