textarea值高度

Question

我有一个textarea，其css高度设置为85px。用户可以在该textarea中键入内容行，我想知道text / val有多高，而不是文本区域本身。

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

Answer 1

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

Answer 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

可以修改此选项，以根据需要动态添加和删除.tmp div。但我试图尽量保持这一点，所以我把它留下了硬编码。

参考文献：

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

Answer 3

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

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

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