Question

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

我想隐藏textarea的边框，以便用户感觉他们在无限的空间内打字。

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

我猜测的一种方式是;将所有文本复制到每个击键的宽度相同的div中，然后测量div的高度，然后设置div的文本区域的高度。

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

Answer 1

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

＆＃13;

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

＆＃13;

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

＆＃13;

<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>

＆＃13;

Answer 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只是为了隐藏textarea的边框，以便用户感觉他/她在页面中写道

#ta{
      border: 0;
      }

使用文本增加textarea高度

2 个答案: