как переделать в jquery?возможно ли изменить так чтобы размер менялся и при удалении текста?

Question

Динамическое изменение размеров textarea под содержимое

var maxWidth = 200;
var maxHeight = 100;

$('.demo').on('input', function(e){         
    // Если появляется скролл и его ширина больше клиентской → увеличиваем ширину клиента
    if (this.scrollWidth > this.clientWidth) 
        this.style.width = this.scrollWidth + 'px';
      
    // Если ширина больше максимально допустимой → даем словам "ломаться" и фиксируем ширину
    if (this.clientWidth >= maxWidth) {
        this.style.width = maxWidth;
        this.style.whiteSpace = 'pre-wrap';
    }
  
    // Если высота больше максимальной → нафиг ничЁ не надо
    if (this.clientHeight > maxHeight) 
        return;    
      
    // Если появляется скролл и его высота клиентской → увеличиваем высоту клиента
    if (this.scrollHeight > this.clientHeight) 
        this.style.height = this.scrollHeight + 'px';
})

такой код сейчас

$(document).on('input', '.nomination_text', function(e){
    $(this).css({'height' : '1px'});
    $(this).css({'width' : '1px'});

    var elm = $(this);
    elm.scrollTop(elm.get(0).scrollHeight);
    elm.scrollLeft(elm.get(0).scrollWidth);
    var scrollHeight = elm.scrollTop() + elm.height();
    var scrollWidth = elm.scrollLeft() + elm.width();
    
    $(this).css({'height' : (scrollHeight + 6) + 'px'});

    if(scrollWidth > this.clientWidth){
        $(this).css({'width' : (scrollWidth + 6) + 'px'});
    }

    if(this.clientWidth >= maxWidth){
        $(this).css({'width' : '420px'});
        $(this).css({'white-space' : 'pre-wrap'});
    }

    elm.scrollTop(0);
    elm.scrollLeft(0);
});

В общем ответ я так и не нашел... Возможно я не понял правильно что мне писали, но если появится человек который сможет объяснить как сделать меняющуюся ширину textarea при помощи jquery при наборе/удалении текста(именно textarea, без скрытых блоков, без замен на какие-то другие блоки и т.п) Я буду благодарен))

Answer 1

Без Jquery в одну строку прямо в элементе:

<textarea name="text" oninput="this.style.height = ''; this.style.height = this.scrollHeight +'px';"></textarea>

С Jquery

$(document).find('textarea').each(function () {
    let  offset = this.offsetHeight - this.clientHeight;

    $(this).on('keyup input focus', function () {
        $(this).css('height', 'auto').css('height', this.scrollHeight + offset);
    });
});

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.0.0/jquery.min.js"></script>
<textarea></textarea>

(Чистый JavaScript + CSS)

$('#container').delegate( 'textarea', 'keydown', function (){
    $(this).height( 0 );
    $(this).height( this.scrollHeight );
});

$('#container').find( 'textarea' ).keydown();

div#container textarea {
    min-width: 270px;
    width: 270px;
    height: 22px;    
    min-height: 22px;
    overflow-y: hidden; /* фикс мигания скроллбара */
    padding-top: 1.0em; /* чтобы не прыгала арея во время нажатия Enter */
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.0.0/jquery.min.js"></script>
<div id="container">
  <textarea></textarea>
</div>

Еще варианты с _{https://stackoverflow.com/questions/454202/}

(Jquery)

$("textarea").each(function () {
    this.setAttribute("style", "height:" + (this.scrollHeight) + "px;overflow-y:hidden;");
}).on("input", function () {
    this.style.height = "auto";
    this.style.height = (this.scrollHeight) + "px";
});

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<textarea placeholder="Type, paste, cut text here...">PRELOADED TEXT.
This javascript should now add better support for IOS browsers and Android browsers.</textarea>
<textarea placeholder="Type, paste, cut text here..."></textarea>

(Чистый JavaScript)

const tx = document.getElementsByTagName("textarea");
for (let i = 0; i < tx.length; i++) {
  tx[i].setAttribute("style", "height:" + (tx[i].scrollHeight) + "px;overflow-y:hidden;");
  tx[i].addEventListener("input", OnInput, false);
}

function OnInput() {
  this.style.height = "auto";
  this.style.height = (this.scrollHeight) + "px";
}

<textarea placeholder="Type, paste, cut text here...">PRELOADED TEXT. This JavaScript should now add better support for IOS browsers and Android browsers.</textarea>
<textarea placeholder="Type, paste, cut text here..."></textarea>

БЛОГ НА HUSL

как переделать в jquery?возможно ли изменить так чтобы размер менялся и при удалении текста?

Ответы (1 шт):

(Чистый JavaScript + CSS)

(Jquery)

(Чистый JavaScript)