textarea值高度 [英] textarea value height

问题描述

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

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

解决方案

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

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

CSS

  textarea，div {
 width：150px; 
 resize：none; 
 border：1px solid #ccc; 
 padding：0; 
保证金：0; 
 font-size：1em; 
 font-family：Arial，sans-serif; 
} 
 textarea {
 height：85px; 
} 
 div {
 min-height：85px; 
} 
  

jQuery：

<$ （$）$ $ $ $ $ $ $ $ $ $ $ $ $ $ $ $ $ $'$'$ （'。tmp'）。text（t）;
$（this）.prev（'。counter'）。text（'Height is：'+ $（this）.next（'。 tmp'）。outerHeight（））;
}）;

JS Fiddle演示。

这可以修改为动态添加和删除 .tmp div s。但是我试图尽可能简单，所以我把它留下了硬编码。

参考文献：

• keyup（） 。


• val（）
code> 。

• next（） 。


• prev（） 。


• text（） 。
outerHeight（） （和 height（） ）。

I have a textarea that has a set css height of 85px. A user might type lines of content within that textarea, and I would like to know how high the text/val is, NOT the text area itself.

Is there a way to check the height of the inside text including line breaks?

解决方案

This is how I'd do it, though obviously the mark-up is only generic and to be amended to your needs:

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.

This could be amended to dynamically add, and remove, the .tmp divs as required. But I was trying to keep this as simple as possible, so I left it hard-coded.

References:

• keyup().
• val().
• next().
• prev().
• text().
• outerHeight() (and height()).

这篇关于textarea值高度的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！