根据内容自动调整文本框大小

Question

http://jsfiddle.net/h2vMN/1/

我已经在文本框中输入了文本，实际应用中这将会动态填充，但为了这个问题的缘故，它已经被预先填充。

<textarea id="textarea">
    Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed tempor commodo ornare. Donec lobortis dui sed lectus egestas tristique. Vivamus vel metus turpis, faucibus varius risus. Aenean ante mauris, ultrices id facilisis vitae, dignissim eget sem. Quisque sed justo lectus, eget aliquet leo. Curabitur in mauris et diam fermentum venenatis. Proin ullamcorper, neque a vehicula euismod, odio enim aliquam ipsum, eu tristique urna sapien nec erat.

Aliquam erat volutpat. In in lacus cursus dolor pellentesque posuere. Cras eu metus urna, a rhoncus ligula. Ut hendrerit orci in arcu dignissim id fermentum orci vulputate. Sed ante ligula, volutpat eu convallis vel, auctor in metus. Mauris euismod, metus eget venenatis sodales, risus tellus volutpat elit, et aliquet massa tellus ut sapien. Mauris tempor posuere massa et consectetur. Duis dignissim enim a nulla ultricies vitae vulputate felis commodo. Phasellus mollis est eget odio porttitor consequat. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia Curae; Phasellus ut nibh auctor libero sagittis semper vitae quis erat.
</textarea>​

当我运行上述代码时，它显示一个带有滚动条的小文本区域。换句话说，从用户友好的角度来看，完全没有用处。如何根据内容量自动调整文本框的大小，并将其宽度设置为600px？

#textarea{width:600px;}​

我希望你能提供一个关于JavaScript/jQuery的解决方案。

我已经尝试过这里提供的.autoresize方法，但没有成功：

http://james.padolsey.com/demos/plugins/jQuery/autoresize.jquery.js/view

注意，高度应自动调整。

- RSM

---

可能是JAVASCRIPT:如何获取文本区域内文本的高度的重复问题。 - jcolebrand

Answer 1

尝试一下这个：

$(document).ready(function(){
    tx = $('#textarea')
    tx.height(tx.prop('scrollHeight'));
})

DEMO

- Sergei Zahharenko

---

我承认，这比我的解决方案更好。但是我的确可以实现有趣的JavaScript功能:p - jcolebrand

Answer 2

$(document).ready(function(){
    var heightFudgeFactor = 10;
    var id = 'tempid' + Date.now();
    $('#textarea').after( $('<div>').css('font-family','monospace').css('white-space','pre-wrap').css('word-wrap','break-word').attr('id',id).css('width',$('#textarea').width()).text( $('#textarea').text() ) );
    $('#textarea').css('height',$('#'+id).outerHeight() + heightFudgeFactor).next().remove();
});​

这是一种实现方式，我创建了一个次级 div，其高度基于内容与 textarea 相同，但您需要进一步调整以使其符合您的实际需求。

- jcolebrand

---

请注意，我没有在其他浏览器上测试过这个程序，只在Chrome上测试过，因为我正在寻找一个基准解决方案来帮助您入门。 - jcolebrand

我认为这会强制它创建一个与父元素匹配的盒子，但是以div的形式，但是我知道这可能会根据其他元素的大小和数量在页面上产生闪烁。这就是生活。 - jcolebrand

是的，在某些情况下可能会很有用，比如溢出隐藏的情况，其中没有滚动高度等。 - Sergei Zahharenko

Answer 3

我曾经使用过这个插件：http://www.jacklmoore.com/autosize 它运行良好。

- Christian Benseler