增加文本框的高度以适应文本内容

Question

增加文本框的高度以适应文本内容

javascriptjqueryhtmlcss

5

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

（当新行开始时，文本区域的高度应该增加一行的高度）

我猜测的一种方法是：在每个按键操作后将所有文本复制到一个具有相同宽度的 div 中，然后测量该 div 的高度，接着将该 div 的高度设置为文本区域的高度。

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

- Positivity

@adeneo 这是仅适用于HTML5的特性吗？还不是... - Positivity

1

那么应该有成千上万的如何自动展开文本区域的教程。 - adeneo

http://www.impressivewebs.com/textarea-auto-resize/ 可能会有所帮助？ - mknadler

1

更正：这个似乎正是你所说的。http://www.jacklmoore.com/autosize/ - mknadler

1

http://jsfiddle.net/t7w7uf05/ - dfsq

显示剩余4条评论

2个回答

网页内容由stack overflow 提供, 点击上面的

可以查看英文原文，
原文链接

- Samer Allahham · Answer 1

这是你想要的内容首先：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;
      }

- Fahad Hasan · Answer 2

你可以轻松地使用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>