文本区域值高度

Question

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

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

Answer 1

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

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 演示。

可以对此进行修改，以根据需要动态添加和删除 .tmp div。但我试图让它尽可能简单，所以我将其硬编码。

参考文献：

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

Answer 3

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

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

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