развернуть эластичный плагин

Question

Я использую эластичный плагин, вот jQuery, который я использую для него:

 <script type="text/javascript">
    jQuery(function(){
    jQuery('textarea').elastic();
    });
 </script>

У меня есть 5 текстовых областей, которые я использую в коде. Поэтому, когда пользователь находится в textarea1, скажем, он нажимает ввод 10 раз и расширяет текстовую область. Есть ли способ, когда он нажимает на вторую текстовую область или щелкает за пределами текстовой области1, текстовая область1 возвращается к своему оригинальному размеру?

Также может ли быть достигнуто противоположное этому? Если textarea1 имеет 3 строки. Можно ли при нажатии на текстовую область увеличить размер до 5 строк?

Answer 1

Вероятно, существует элегантный способ отсоединения / повторного связывания событий эластика, но для быстрого перебора грубой силы вы можете использовать атрибут !important для переопределения CSS на высоте текстовой области.

Создание текстовой области с атрибутом rows (поэтому мы знаем, к какому размеру следует возвращать текстовую область):

<textarea rows="4"></textarea>

Прикрепите функции фокусировки / размытия к текстовой области для переопределения / сброса высоты:

jQuery(function() {
    $('textarea').focus(function() {
        // remove any height overrides
        $(this).css('height', '');
        // make it elastic
        $('textarea').elastic();
    });
    $('textarea').blur(function() {
       // override the height on the textarea to force it back to its original height
       $(this).css('height', $(this).attr("rows") + 'em !important'); 
    });
});