jQuery - создание авторазметки TextArea, которая не мигает при изменении размера

Question

Я работал над созданием текстовой области с автоматическим изменением размера (как в FB), которая изменяет размеры при вводе текста. Там есть несколько плагинов. Проблема в том, что все они на 99%. Чего не хватает:

• Вкл. Изменить размер текстовой области мигает (при возврате / вводе)
• На вставке есть задержка

Пожалуйста, посмотрите здесь: http://jsfiddle.net/uzjdC/3/

Есть идеи, почему он мигает при изменении размера? Введите текст, затем нажмите Enter, чтобы увидеть его ..

Спасибо

Answer 1

Yahoo! Я нашел решение! Ваш пример меня очень заинтриговал, , поэтому я решил поиграть в jsFiddle, чтобы попытаться исправить вашу проблему с прошивкой . Мигание происходит из-за того, что TextArea имеет «много текста» и происходит некоторая прокрутка. Событие keyup не оборудовано, чтобы побить эту полосу прокрутки, но ... событие scroll - это!

Html:

<textarea id="tst" rows="1" cols="40">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Quisque interdum porttitor neque eget consequat. Sed faucibus purus vitae felis facilisis bibendum.</textarea>

Css:

textarea{    
    overflow:hidden;
    overflow-x:hidden;
    overflow-y:hidden;
    padding:10px;
}

Для увеличения я использую атрибут rows TextArea. Я записал это в функцию: Я увеличиваю область с помощью этой функции:

//resize text area
function resizeTextArea(elem){

    elem.height(1); 
    elem.scrollTop(0);
    elem.height(elem[0].scrollHeight - elem[0].clientHeight + elem.height());
}

Теперь нам нужно только связать изменение размера:

//inital resize - on document load
resizeTextArea($('#tst'));

//bind events
$('#tst').bind('scroll keyup', function(){
    resizeTextArea($(this));
});

Примечание: мигание не происходит! Зачем? Потому что использование события scoll! Вы можете попробовать решение здесь: http://jsfiddle.net/KeesCBakker/2D8Kf/

Удачи!

Редактировать : Изменен код в примере jsFiddle для поддержки схем, в которых динамически добавляются текстовые области. Проверьте также этот вопрос .