如何得到textarea内容的高度或textarea内容的行数

Posted 2023-05-12

<textarea id="reportText" type="text" readonly="readonly" ></textarea>
$(function()
①
var h = $("#reportText").val().split("\n").length; //获取文本行数
var v= $("#reportText").val(); //获取文本内容
if(v.length > 20 && h <= 1) //如果文本内容多于自定义的20个字一行,
//且文本的高度只有一行时候的判断
h = (v.length / 20)+1;

$("#reportText").attr("rows", h);
①
)
精测没有问题的 , 可以用 , 不过有的时候可能根据数据读取的快慢 , 方法加载会有问题 , 如果没能自适应高度 , 可将该方法①放在setTimeout()函数中根据自己数据读取的时间自定义 参考技术A 09:00 在网上，已经有很多关于在一个textbox限制允许的字符数量。但是如果需要，在textbox中如何去统计和限制行数呢。这里有一个解决方案，使用客户端的javascript去限制TextArea的内容为指定的字符数量和指定的行数（不一定就等于TextArea中可见的
09:00 在网上，已经有很多关于在一个textbox限制允许的字符数量。但是如果需要，在textbox中如何去统计和限制行数呢。这里有一个解决方案，使用客户端的Javascript去限制TextArea的内容为指定的字符数量和指定的行数（不一定就等于TextArea中可见的 参考技术B lt;html;
lt;body;
lt;textarea id=t_1 style=width:320px;height:240px;;lt;/textarea;
lt;textarea id=t_2 style=width:320px;height:240px;;lt;/textarea;
lt;script;
var t_O1=document.getElementById(;t_1;);
var t_O2=document.getElementById(;t_2;);
function t2t()
var t_s=t_O1.value;
var t_l=t_s.lenh;
t_O2.value=;长度：;+t_l+;;r;n值：;+t_s;

t_O1.onkeydown=t2t;
lt;/script;
lt;/body;
lt;/html;本回答被提问者采纳

如何让textarea的高度自适应

另外找一个元素，和textarea设置一样的样式，当textarea输入的时候，将内容填充到该元素内，然后再将该元素的高度赋值给textarea。

这个元素比较苛刻了，不仅要接收textarea的文字内容，也要接收格式，比如回车什么的，很明显是pre标签了。
写在pre标签里的东西可以原格式输出，如果要在别的元素，比如div上实现类似的效果，可能需要使用一些CSS，比如white-space:pre，诸如此类的代码。

直接上代码了:
首先准备一个pre，一个textarea：
<pre class="input" id="pre"></pre>
<textarea class="input" id="textarea"></textarea>

然后给他们设置相同的样式：
.input
padding: 10px;
width: 300px;
min-height: 150px;
border: 1px solid #ccc;
resize: none;
font-size: 20px;
line-height:30px;
overflow: hidden;
word-wrap: break-word;


这里设置了min-height，给他们一个最小高度，里面的字体行高的都设置的一样，这样他们的表现就一致了。注意：为了纯英文的换行，加上word-wrap。
最后一段简单的脚本：
var textarea = document.getElementById('textarea');
var pre = document.getElementById('pre');

textarea.oninput = function()
pre.textContent = textarea.value;
textarea.style.height = pre.offsetHeight + 'px';


监听textarea的input事件，更新自身的高度。

这时候，高度自适应的textarea已经构造完成了。但是pre这个元素我们是不想让他显示的，需要把他隐藏掉，但不能简单的display：none，这样就取不到pre的高度了，所以使用另外一个属性visibility，不过这个属性还是会占用空间的，把pre绝对定位即可：
.hide
position: absolute;
z-index: -100;
visibility: hidden;


<pre class="input hide" id="pre"></pre>

大功告成！

不过还有一些兼容性工作要做，IE8以下是不支持oninput事件的，但他们支持一个更强大的属性：onpropertychange。
可能有的童鞋会觉得可以使用onkeyup或者onkeydown事件，我在chrome下试验了下，在textarea改变高度的时候，会有闪动，oninput的表现就比较平滑。推荐使用oninput。 参考技术A 利用textarea的scrollHeight属性，设置高度为scrollHeight。本回答被提问者采纳