用文本增加文本区域高度答案

【问题标题】：Increase textarea's height with text用文本增加文本区域高度
【发布时间】：2014-12-14 19:11:31
【问题描述】：

文本区域可以在插入文本时调整它的高度吗？

我想隐藏 textarea 的边框，让用户感觉他们在无限的空间中输入。

（新行开始时，textarea的高度应该增加一行的高度）

我猜的一种方法是；在每次击键时将所有文本复制到具有相同宽度的 div 中，然后测量 div 的高度，然后为 textarea 设置 div 的高度。

我注意到的一个问题是滚动条宽度应该从主宽度中减去，而在不同的设备上，我们有 0 到 16px 可变滚动条宽度...，有什么建议吗？

【问题讨论】：

您确定您不是在寻找可编辑的内容？
@adeneo 那么这是 HTML5 独有的功能吗？还没有……
那么应该有一千个关于如何自动扩展文本区域的方法
更正：this 似乎完全符合您的要求。 jacklmoore.com/autosize
jsfiddle.net/t7w7uf05

标签： javascript jquery html css

【解决方案1】：

您可以使用 elastic.js 轻松实现您想要做的事情，这是一个简单的单行解决方案。

$('#note').elastic();

textarea#note {
	width:100%;
	display:block;
	resize: none;
	border: none;
}
textarea:focus {
	outline: none;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="https://jquery-elastic.googlecode.com/svn-history/r37/trunk/jquery.elastic.js"></script>
<textarea id="note">Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat. Ut wisi enim ad minim veniam, quis nostrud exerci tation ullamcorper suscipit lobortis nisl ut aliquip ex ea commodo consequat. Duis autem vel eum iriure dolor in hendrerit in vulputate velit esse molestie consequat, vel illum dolore eu feugiat nulla facilisis at vero eros et accumsan et iusto odio dignissim qui blandit praesent luptatum zzril delenit augue duis dolore te feugait nulla facilisi.</textarea>

【讨论】：

它现在滚动，没有添加任何文本！
@webinan 不太清楚你的意思。尽管我已经编辑了上面的 sn-p，你可能想再检查一次。

【解决方案2】：

这就是你想要的第一：这里的html是带有id的文本区域：ta

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
    <textarea rows="10" cols="10" id="ta">
    </textarea>

这里是 jquery 代码，其工作方式如下：每次进入最后一行时，都会增加文本区域的高度（行数）

  $('#ta').keypress( function(){
                    var rows=$('#ta').attr('rows');
                    var text=$('#ta').val();
                    var lines=text.split('\n');
                    if(lines.length==rows){
                        rows++;
                        $('#ta').attr('rows',rows);
                    }
                });

而这个 css 只是为了隐藏文本区域的边框，让用户感觉他/她在页面中书写

#ta{
      border: 0;
      }

【讨论】：