調整大小根據內容

我裏面一個文本框中的文本已經在實際應用中，這將被動態自動填寫文本框，但對於這個問題已經預填的緣故。

<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

注意，高度應自動調整

來源

2012-06-19 RSM

可能重複的[JAVASCRIPT：如何獲取textarea文本的高度]（http://stackoverflow.com/questions/3341 496/javascript-how-to-the-height-of-text-inside-of-textarea） – jcolebrand

你的這個：

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

DEMO

來源

2012-06-19 14:36:33

我承認，這是比我更好的解決方案。但是我的確很有趣JavaScript的事情：p – jcolebrand

我曾經用這個插件：http://www.jacklmoore.com/autosize 它好工作。

來源

2012-06-19 14:33:30

$(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-19 14:38:42 jcolebrand

請注意，我沒有在其他瀏覽器上測試這個，只是Chrome，因爲我正在尋找一個基線解決方案來幫助您開始。 – jcolebrand

這是一個很好的解決方法:) –

我想這迫使它創建一個匹配父，但在div格式的框，但我知道這可以在頁面上創建一個閃爍取決於其他元素的大小和數量。這就是生活。 – jcolebrand

調整大小根據內容

回答

相關問題