5

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

请注意，高度应自动调整大小

4

3 回答 3

2

你这个：

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

演示

于 2012-06-19T14:36:33.220 回答
1 
$(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 的高度，基于内容，但你需要多玩一点才能让它符合你的实际喜好

于 2012-06-19T14:38:42.313 回答
0

我曾经使用过这个插件：http ://www.jacklmoore.com/autosize 它工作得很好。

于 2012-06-19T14:33:30.737 回答