Comment redimensionner automatiquement les zones de texte en utilisant simplement CSS?

Question

Je dois faire une augmentation de la hauteur de la zone de texte à mesure qu'elle se remplit de texte. J'avais déjà une solution JavaScript/JQuery pour cette

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

Et ce presque servi le but. En bref, j'ai une fenêtre contextuelle dans mon application Web, et je veux être capable de faire glisser des objets d'ailleurs, et de les vider dans mon popup, en créant de nouvelles zones de texte qui redimensionnent pour s'adapter à leur contenu. Cette fonction redimensionne uniquement les zones de texte lorsque je les tape. Un collègue pense que je peux le faire avec CSS seul - pas de plugins JavaScript ou JQuery? Toutes les autres solutions que j'ai trouvées sur les interwebs reposent sur au moins un plugin JQuery (et je ne peux pas télécharger de nouveaux plugins sur ma machine au travail si facilement). Y a-t-il un moyen avec juste CSS?

J'ai essayé de changer des textareas en divs, et en utilisant l'attribut contenteditable. Cela a causé des problèmes ailleurs (mais il faudrait beaucoup de temps pour expliquer pourquoi).

Thx - Gaweyne

EDIT: S'il est impossible avec CSS pur, je voudrais accepter des solutions qui utilisent JavaScript ou JQuery que je ne pas besoin de télécharger des plugins supplémentaires pour.

Answer 1

1. Utilisation event delegation pour gérer dynamiquement des éléments ajoutés.

2. Déplacez le CSS vers une feuille de style.

3. En entrée, réglez la hauteur sur 80, puis réglez-la sur la hauteur de défilement.

Snippet

$('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>

Answer 2

espérons que cela vous aidera.

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); 
}