textarea值高度[重复]

Posted 2023-05-07

【中文标题】textarea值高度[重复]

【英文标题】：textarea value height [duplicate]

【发布时间】：2011-08-25 03:30:34

【问题描述】：

我有一个设置 CSS 高度为 85 像素的 textarea。用户可能会在该 textarea 中键入内容行，我想知道 text/val 有多高，而不是文本区域本身。

有没有办法检查内部文本的高度，包括换行符？

【问题讨论】：

你为什么不看看这个插件 - plugins.jquery.com/project/autogrowtextarea

尝试计算字符数，因为 textarea 有 cols 和 lines 属性，您可以根据文本的行数来估计高度。我对此没有明确的答案。

您可以查看this answer。

为了帮助引导正确方向的答案：为什么需要知道文本的高度？

【参考方案1】：

我会将 textarea 的内容复制到另一个具有相同宽度的元素中，隐藏，然后获取它的高度。

【讨论】：

如果它隐藏了...它有没有高度

即使这样也很难说，因为如果滚动条弹出怎么办。

如果你使用visibility:hidden而不是display:none，它可能会有一个高度。

@Neal 和 @Rocket 不正确，请参见此示例：jsfiddle.net/RPBPF

【参考方案2】：

这就是我的做法，但显然标记只是通用的，需要根据您的需要进行修改：

html

<div class="counter"></div>
<textarea></textarea>
<div class="tmp"></div>

CSS

textarea, div 
    width: 150px;
    resize: none;
    border: 1px solid #ccc;
    padding: 0;
    margin: 0;
    font-size: 1em;
    font-family: Arial, sans-serif;

textarea 
    height: 85px;

div 
    min-height: 85px;

jQuery:

$('textarea').keyup(
    function(e)
        var t = $(this).val();
        $(this).next('.tmp').text(t);
        $(this).prev('.counter').text('Height is: ' + $(this).next('.tmp').outerHeight());
    );

JS Fiddle demo.

这可以修改为根据需要动态添加和删除.tmpdivs。但我试图让它尽可能简单，所以我把它硬编码了。

参考资料：

keyup()。 val()。 next()。 prev()。 text()。 outerHeight()（和height()）。

【参考方案3】：

我不确定您为什么要这样做。如果您只是想增加框的大小以匹配文本，请使用多种扩展之一，例如：

http://unwrongest.com/projects/elastic/

如果这不是您想要的，您可以查看源代码，看看他们是如何实现这一目标的，然后模仿它。