在没有使用jQuery的情况下，计算HTML文本区域中显示行数（而不是新行数）的方法是什么？

Question

在没有使用jQuery的情况下，计算HTML文本区域中显示行数（而不是新行数）的方法是什么？

9

可能是重复的问题:
如何获取<textarea>中的行数？

我有一个textarea，我在里面写了7行文字，只使用了2个换行符，就像下面这样，想象一下以下代码框是一个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.

如果在写了一些行之后，现在的文本区域行数为n。我该如何计算n的值？

在回答问题之前，请明确表达。我不想像这个链接中那样计算我的文本中有多少换行符。如何获取文本区域中的行数？ 我想要像Microsoft Word一样计算一段文字的行数。

请不要使用jQuery...

- Naz

3

你尝试过什么？（StackOverflow的目的是帮助你解决问题，而不是替你完成任务。你至少应该尝试自己解决问题。） - jdigital

3

这个问题的最高票答案不就是你想要的吗？链接 - Denys Séguret

1

@BlackCobra 试着搜索一下关于自动调整文本框高度的文章。如果你能够计算所需的大小，那么你就可以使用Ace的解决方案。 - jdigital

1

朋友们...为什么这个问题被关闭了...??请阅读我的问题和评论...任何人都会明白我的问题是独特的...不是重复的...顺便问一下，我为什么要发布一个重复的问题呢...?? - Naz

1

不要删除自动插入的文本。即使你不同意它，它也有其存在的原因。如果您认为需要重新打开，则可以标记。 - J. Steen

显示剩余7条评论

1个回答

网页内容由stack overflow 提供, 点击上面的

可以查看英文原文，
原文链接

- Ace · Accepted Answer

您可以尝试这个。我目前还没有测试过，但我记得这应该可以很好地工作。

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

首先，确定为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>

现在应该正常工作。

更新

您还可以确保在获取长度之前删除所有的 “new line” 元素或仅删除字符串中的最后一个字符，如果它是一个 “new line”。这样就不会计算多余的行。

同时，请务必不要设置文本框的“宽度”！这将导致一行中的文本超过“cols”的值。那么，“count”值将为最大行宽为cols值的行数。所以，设置文本框的宽度的唯一方法是使用cols属性。

更新2

我认为，如果你想要一个没有错误的解决方案，就得使用PHP或jQuery。

此外，第二个解决方案只是一个快速而肮脏的方式。您需要编写逻辑来检查每个单词是否比可用宽度更长，并检查每行中由于空间不足而被放到下一行的单词。

这需要一定的逻辑技能，由于目前处于非活跃状态，我暂时不会编写代码。

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