我如何获得textarea的高度

Question

我需要获得textarea的高度。看似如此简单，但这让我很生气。

我已经在stackoverflow上研究了很多年而没有运气：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

请帮助，我的机智已经结束了！

Answer 1

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

这是针对任何面临同样问题的人：

1. 选择textarea：

   var textarea = $('#history');
   

2. 获取textarea的文字：

   var text = textarea.text();
   

3. 创建一个临时div：

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

4. 将临时div的宽度设置为与textarea相同。非常重要的是，文本将全部放在新临时div中的一行！：

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

5. 将文本插入新临时div：

   div.text(text);
   

6. 将其附加到DOM：

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

7. 获取div的高度：

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

8. 从DOM中删除临时div：

   div.remove();
   

Answer 2

有一个类似的问题，在我的情况下，我想有一个扩展按钮，该按钮可以在两种状态（扩展/折叠）之间切换。经过几个小时的搜索，我终于想到了这个解决方案：

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

获取内部高度：

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

将其设置为您的元素

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

使用扩展按钮完成代码（我在textarea上设置了最小高度）：

$(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'));
  });

Answer 3

将此字符放在任何HTML元素之前。

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

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

你显然不必提醒它。我只是使用了一个容易看见的例子。

Answer 4

给定一个带有id＆＃34;历史＆＃34;的textarea，这个jQuery将返回它的高度：

$('#history').height()

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

Answer 5

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

Answer 6

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

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

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

基于行

专业版：几乎是微不足道的。 专业版：利用现有的用户代理行为为您执行繁重的工作（字体度量计算）。 骗局：无法设置动画。 约束：已扩展为支持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），但在折叠时会有些困难。在CSS中通过min-height和max-height定义的 Pro：约束。 缺点：，除非经过仔细计算，否则约束可能会裁切线。

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。