Как сделать textareas автоматическим изменением размера, используя только CSS?

Question

Мне нужно сделать увеличение высоты textarea, когда оно заполняется текстом. Ранее я имел решение JavaScript/JQuery для этого

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

И это почти служили цели. Вкратце, у меня есть всплывающее окно в моем веб-приложении, и я хочу иметь возможность перетаскивать объекты из другого места и выгружать их во всплывающем окне, создавая новые текстовые области, которые изменяют размер, чтобы соответствовать их содержимому. Эта функция меняет размер текстовых полей только по мере ввода.

Коллега считает, что я могу сделать это только с помощью CSS - нет плагинов для JavaScript или JQuery? Каждое другое решение, которое я нашел в interwebs, полагается, по крайней мере, на некоторый плагин JQuery (и я не могу легко загрузить новые плагины на мою машину на работе). Есть ли способ с помощью CSS?

Я попытался сменить текстовые поля на divs и использовать атрибут contenteditable. Это вызвало проблемы в других местах (но объяснить, почему) потребуется много времени.

Thx - Gaweyne

EDIT: Если это невозможно с чистым CSS, я принимаю решения, которые используют JavaScript или JQuery, что мне не нужно, чтобы загрузить дополнительные плагины для.

Answer 1

1. Использование event delegation для обработки динамически добавленные элементы.

2. Переместить CSS в таблицу стилей.

3. На входе установите высоту 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>

Answer 2

надеюсь, что это вам поможет.

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