1

我需要获取文本区域的高度。看起来很简单，但它让我发疯。

我一直在研究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等等。

这是它目前的样子：

带有文本区域的对话框窗口的图片

这就是我希望它看起来的样子，打开一个完整的高度：

对话框窗口的图片，其中 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

请帮忙，我无能为力！

4

6 回答 6

6

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

这里适用于面临同样问题的任何人：

  1. 选择文本区域：

    var textarea = $('#history');

  2. 获取 textarea 的文本：

    var text = textarea.text();

  3. 创建一个临时 div：

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

  4. 将 temp 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 中删除 temp div：

    div.remove();
于 2013-10-31T09:10:59.127 回答
3

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

使用 .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'));
  });
于 2018-09-13T10:12:36.967 回答
1

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

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

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

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

于 2013-10-30T13:52:18.897 回答
1

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

$('#history').height()

请参阅http://jsfiddle.net/jhfrench/JcGGR/ 的工作示例

于 2013-10-30T14:20:41.570 回答
1

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

于 2013-10-30T15:35:52.230 回答
1

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

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

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

基于行

优点：几乎是微不足道的。 Pro：利用现有的用户代理行为，为您完成繁重的工作（字体度量计算）。 缺点：不可能动画。 缺点：根据我用于探索此问题的代码笔扩展以支持约束，约束被编码到 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)
}

基于可滚动区域

Pro：仍然几乎是微不足道的。 优点：在 CSS 中可动画化（即使用transition），尽管在折叠方面有一些轻微的困难。 Pro：在 CSS 中通过min-height和定义的约束max-height。 缺点：除非仔细计算，否则约束可能会裁剪线条。

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从未考虑缩小大小的情况；有关详细信息，请参见下文。或者他们“以错误的顺序”利用事件导致进入和更新之间的明显延迟，例如按回车……然后按任何其他键以进行更新。 例子。

初始问题的解决方案

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

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

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

parseInt(getComputedStyle(elem).height, 10)

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

于 2020-01-26T01:14:27.333 回答