如何获得文本区域的高度

Posted 2023-05-07

【中文标题】如何获得文本区域的高度

【英文标题】：How do I get the height of a textarea

【发布时间】：2013-11-10 03:10:12

【问题描述】：

我需要获取文本区域的高度。看似简单，却让我抓狂。

我多年来一直在研究 ***，但没有运气：textarea-value-height 和 jquery-js-get-the-scrollbar-height-of-an-textarea 和 javascript-how-to-get-the-height-of-text-inside-of-a-textarea 等等。

这是目前的样子：

这是我想要的样子，打开一个完整的高度：

.

这是我的html：

 <textarea id="history" class="input-xxlarge" placeholder="Enter the content ..." rows="13"></textarea>

CSS：

 .input-xxlarge 
    display: inline-block;
    height: auto;     
    font-size: 12px;
    width: 530px;
    resize: none;
    overflow: auto;
 

jQuery:

 var textarea = $('#history');

我已经尝试过（除其他外）：

1. textarea.height() --> always returns 0
2. textarea.ready(function()  // wait for DOM to load
      textarea.height();
   
3. getting scrollheight from textarea as an HTMLTextareaElement (i.e. DOM Element) --> returns 0
4. var contentSpan = textarea.wrapInner('<span>');
   var height = contentSpan.height(); --> always returns 0

请帮忙，我已经无能为力了！

【问题讨论】：

我假设input-xxlarge 之前缺少的. 是您的帖子中的错误。

您可以查看this answer。

我收到了一个号码 here（最新的 Chrome）——也许你在 DOM 加载之前运行代码？

嗨 Mooseman，是的，CSS 正在被正确应用。我会更正伪代码。

嗨 Blazemonger，感谢您的评论。我的“我试过”部分中的第 2 号通过在检查高度之前对元素使用 jQuery.ready() 函数来查看该解决方案。没有运气

【参考方案1】：

好的，我找到了解决方案。我不知道这是否是最好的解决方案，但它确实有效，坦率地说，这就是我关心的全部，我在这个问题上花了将近一天的时间。

这里是为遇到同样问题的人准备的：

选择文本区域：

var textarea = $('#history');

获取textarea的文本：

var text = textarea.text();

创建一个临时 div：

var div = $('<div id="temp"></div>');

将 temp div 的宽度设置为与 textarea 相同。非常重要，否则文本将全部位于新临时 div 中的一行！：

div.css(
   "width":"530px"
);

将文本插入新的临时 div：

div.text(text);

将其附加到 DOM：

$('body').append(div);

获取div的高度：

var divHeight = $('#temp').height();

从 DOM 中移除临时 div：

div.remove();

【讨论】：

我发现在这个美丽的 ES6 时代使用 jQuery 是可憎的。 My experiment on CodePen 演示了两种方法，第一种是基于行的（用于没有软换行的文本区域），第二种是使用 scrollHeight 计算的动画方法。两者本质上都是两行，不涉及被调整大小的内容的重复，也不涉及 jQuery。

My own answer given 的解决方案涉及不添加 JavaScript 和删除少量 CSS，以及高效的无 jQuery 计算方法（XY 实际问题） ，再加上一种使这种动态变化的最小方法。

【参考方案2】：

有一个类似的问题，在我的例子中，我想要一个展开按钮，它可以在两种状态（展开/折叠）之间切换。在搜索了几个小时后，我终于想出了这个解决方案：

使用 .prop 获取内容高度 - 使用动态填充的 textarea，然后在加载命令上将其设置为您的 textarea。

获取内部高度：

var innerHeight = $('#MyTextarea').prop('scrollHeight');

将其设置为您的元素

$('#MyTextarea').height(innerHeight);

使用展开按钮的完整代码（我的文本区域设置了最小高度）：

$(document).on("click", '.expand-textarea', function () 
    $(this).toggleClass('Expanded');

    if($(this).hasClass('Expanded'))
      $($(this).data('target')).height(1);
    else
      $($(this).data('target')).height($($(this).data('target')).prop('scrollHeight'));
  );

【参考方案3】：

将它放在任何 HTML 元素之前。

<script src="/path/to/jquery.js"></script>

<script>
$(document).ready(function()
var textarea = $('#history');
alert(textarea.height()); //returns correct height 
);
</script>

您显然不必提醒它。我只是在使用一个容易看到的例子。

【讨论】：

嗨，扎克，感谢您的帖子。我假设 $(document).ready(...) 确保 DOM 已加载？如果是这样，我已经尝试过使用 ('#history').ready(...) 但这没有用。

你想等到 document 准备好（即：加载），而不仅仅是#history。

@Tone 你确定你把脚本放在头上了吗？

扎克，不，我没有那样做。我正在使用 angularjs，所以它已经在一个 javascript 文件中

【参考方案4】：

给定一个带有“历史”id 的 textarea，这个 jQuery 将返回它的高度：

$('#history').height()

请看a working example at http://jsfiddle.net/jhfrench/JcGGR/

【讨论】：

感谢您抽出宝贵的时间来回复和做小提琴杰罗米。我确实尝试过这个解决方案，虽然它在你的小提琴和我尝试过的其他方法中都能很好地工作，但它只是在我的应用程序中返回零。

您使用的是什么版本的 jQuery？您只是想获取 textarea 的高度，还是想获取模态框内 textarea 的可见高度？

Jeromy，使用 jquery-1.9.1 并尝试在模态（剑道对话框）中获取文本区域的可见高度。实际上，我正在尝试获取 textarea 内容的高度。

【参考方案5】：

如果您不打算进行任何计算，也可以使用$('#history').css('height'); 检索以像素为单位的高度。

【讨论】：

嗨，destroydaworld，感谢您的评论。不幸的是，我必须对 textarea 的内容进行计算。使用它我就知道设置包含文本区域的对话框有多高。

【参考方案6】：

现代答案：textarea 大小调整是几行 ES6 可实现的两种主要方式。它不需要需要（或受益于）jQuery，也不需要复制被调整大小的内容。

因为这是实现自动调整大小的功能最常需要的，所以下面给出的代码实现了这个功能。如果你的包含文本区域的模态对话框没有人为地限制，而是可以适应内部内容的大小，这可能是一个完美的解决方案。例如。不要指定模态体的高度并删除overflow-y 指令。 （那么就不需要 JS 来调整模态高度了。）

如果您真的真的只需要获取高度，而不是调整 textarea 本身的高度，请参阅最后一节了解更多详细信息。

基于行

专业人士：几乎是微不足道的。 专业版： 利用现有的用户代理行为，为您完成繁重的工作（字体度量计算）。 缺点：不可能动画。 Con： 扩展为根据my codepen used to explore this problem 支持约束，约束被编码到 HTML 中，而不是 CSS 的一部分，作为数据属性。

/* Lines must not wrap using this technique. */
textarea  overflow-x: auto; white-space: nowrap; resize: none 

for ( let elem of document.getElementsByTagName('textarea') ) 
    // Prevent "jagged flashes" as lines are added.
    elem.addEventListener('keydown', e => if ( e.which === 13 ) e.target.rows = e.target.rows + 1)

    // React to the finalization of keyboard entry.
    elem.addEventListener('keyup', e => e.target.rows = (elem.value.match(/\n/g) || "").length + 1)

基于可滚动区域

专业人士： 仍然几乎是微不足道的。 专业版： 可在 CSS 中设置动画（即使用 transition），但在折叠时有一些轻微的困难。 专业版： 通过min-height 和max-height 在CSS 中定义的约束。 缺点：除非仔细计算，否则约束可能会裁剪线条。

for ( let elem of document.getElementsByTagName('textarea') )
    elem.addEventListener('keyup', e => 
        e.target.style.height = 0  // SEE NOTE
        e.target.style.height = e.target.scrollHeight + 'px'
    )

使用scrollHeight 的搜索结果中的惊人百分比从未考虑减小大小的情况；有关详细信息，请参见下文。或者他们“以错误的顺序”利用事件导致进入和更新之间的明显延迟，例如按 enter... 然后按任何其他键以进行更新。 Example.

初始问题的解决方案

最初的问题与获取文本区域的高度有关。第二种自动调整大小的方法展示了与实际内容相关的特定问题的解决方案。 scrollHeight 包含元素的高度，无论约束如何，例如它的内部内容大小。

注意： scrollHeight 在技术上是元素外部高度的Math.max()或内部高度，以较大者为准。因此初始分配高度为零。没有这个，textarea 会扩展，但不会崩溃。初始分配为零可确保您检索实际的内部内容高度。对于未更改的采样，移除高度覆盖（分配''）或保留（之前）然后在检索scrolllHeight 后恢复。

要按原样计算元素的高度，请使用getComputedStyle 并解析结果：

parseInt(getComputedStyle(elem).height, 10)

但是真的，请考虑只调整 CSS 以允许模式自然扩展，而不是使用 JavaScript。