如何讓textareas只使用CSS自動調整大小？

我需要在填充文本時增加textarea的高度。我以前有一個JavaScript/JQuery的解決方案，這如何讓textareas只使用CSS自動調整大小？

function expandingTextBox(e) { 
    $(e).css({'height':'80', 'overflow-y':'hidden'}).height(e.scrollHeight); 
} 
$('textarea').each(function(){ 
    expandingTextBox(80); 
}).on('input', function() { 
    expandingTextBox(this); 
});

這幾乎服務的目的。簡而言之，我在我的web應用程序中有一個彈出窗口，我希望能夠從其他地方拖動對象，並將它們轉儲到彈出窗口中，創建新的textareas，以調整其大小以適應其內容。這個函數只會在輸入textareas時調整它的大小。

一位同事認爲我可以用CSS做到這一點 - 沒有JavaScript或JQuery插件？我在互聯網上找到的其他解決方案至少依賴於一些JQuery插件（並且我無法輕鬆地將新插件下載到我的機器上）。有隻用CSS的方法嗎？

我試過改變textareas divs，並使用contenteditable屬性。這在其他地方引起了問題（但解釋原因需要很長時間）。

THX - Gaweyne

編輯：如果這是不可能用純CSS，我會接受使用JavaScript或JQuery的解決方案，我並不需要下載額外的插件。

來源

2015-07-21 Gaweyne

到這裏看看：http://stackoverflow.com/questions/6907220/css-textarea-size –

注意，你的'每個'方法什麼都不做。它將'80'傳遞給'expandingTextBox（e）'，並且函數中的$（e）'將返回一個空集合。 –

不是Akul的問題，但謝謝。該線程中的海報要求文本框水平擴展。提供給他的解決方案不起作用，第二個解決方案需要一個JQuery插件，我無法在我的機器上下載它。但是，如果有人問我到底在問什麼，我剛剛錯過了，請告訴我。 – Gaweyne

使用event delegation來處理動態添加元素。
將CSS移到樣式表中。
輸入時，將高度設置爲80，然後將其設置爲滾動高度。

片段

$('button').on('click', function() { 
 
    $('<textarea/>').appendTo('body').focus(); 
 
}); 
 

 
$(document).on('input', 'textarea', function() { 
 
    $(this).height(80).height(this.scrollHeight); 
 
});

textarea { 
 
    vertical-align: top; 
 
    height: 80px; 
 
    overflow-y: hidden; 
 
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<button>Add new textarea</button> 
 
<hr> 
 
<textarea></textarea>

來源

2015-07-21 13:06:05

我可能能夠實現這一點。我會向您展示更多我的代碼，但在我們正在構建的應用程序的上下文之外沒有任何意義：我會盡快回復您... – Gaweyne

我做了一些稍微不同的事情，因爲我無法實現這正好。儘管如此，這是完美的。你贏得最好的答案。 *提示fedora *。 – Gaweyne

-1

希望這會幫助你。

http://jsfiddle.net/Tw9Rj/463/

textarea#note { 
    width:100%; 
    direction:rtl; 
    display:block; 
    max-width:100%; 
    line-height:1.5; 
    padding:15px 15px 30px; 
    border-radius:3px; 
    border:1px solid #F7E98D; 
    font:13px Tahoma, cursive; 
    transition:box-shadow 0.5s ease; 
    box-shadow:0 4px 6px rgba(0,0,0,0.1); 
    font-smoothing:subpixel-antialiased; 
    background:linear-gradient(#F9EFAF, #F7E98D); 
    background:-o-linear-gradient(#F9EFAF, #F7E98D); 
    background:-ms-linear-gradient(#F9EFAF, #F7E98D); 
    background:-moz-linear-gradient(#F9EFAF, #F7E98D); 
    background:-webkit-linear-gradient(#F9EFAF, #F7E98D); 
}

來源

2015-07-21 12:58:55 Steevan

以下哪些屬性將執行OP所需的操作，以及其他屬性有哪些？ –

李斯特先生說什麼，不完全是我要求的O_o 您的小提琴中的文本框沒有調整我輸入的大小。它有一個滾動條。不要誤解我的意思，這是一個漂亮的文本框，但... – Gaweyne

如何讓textareas只使用CSS自動調整大小？

回答

相關問題