在模态框内编辑表单时的动态文本区域

Question

Here I put the code I'm trying to make the textarea adjust the size dynamically when opening the modal.

 $(document).on('keyup input keypress keydown change', '.area1', function(e) { var tamanhoMin1 = $(this).attr('rows') * $(this).css('line-height').replace(/[^0-9\.]+/g, ''); $(this).css({'height': 'auto'}); var novoTamanho1 = this.scrollHeight + parseFloat($(this).css("borderTopWidth")) + parseFloat($(this).css("borderBottomWidth")); if (tamanhoMin1 > novoTamanho1) novoTamanho1 = tamanhoMin1; $(this).css({'height': novoTamanho1}); }); $(".area1").delay(0).show(0, function() { var el1 = $(this); setTimeout(function () { el1.trigger('keyup'); }, 100); });

 .area1{ display: none; overflow: hidden; resize: none; }

 <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css"> <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script> <script src="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/js/bootstrap.min.js"></script> <button type="button" class="btn btn-primary edit_faq" data-toggle="modal" data-target="#add_data_Modal1" style="float: right; margin-left: 1%;">Alterar Procedimento</button> <div class="modal fade" id="add_data_Modal1" tabindex="-1" role="dialog" aria-labelledby="exampleModalLabel" aria-hidden="true"> <div class="modal-dialog modal-lg" role="document"> <div class="modal-content"> <div class="modal-header"> <button type="button" class="close atualizar" data-dismiss="modal" aria-label="Close"> <span aria-hidden="true">&times;</span> </button> </div> <div class="modal-body"> <form action="" method="post" id="faqq1" class="faqq1"> <div class="card"> <div class="card-header contact-header"> <h2 class="text-center">ALTERAR PROCEDIMENTO</h2> </div> <div class="card-body m- contact-body"> <div class="form-group mb-0"> <label for="Procedimento1">Procedimento</label> <textarea class="form-control area1" name="Procedimento1" id="Procedimento1" rows="2"> Até pouco tempo atrás todos acreditavam que o Universo era infinito (inclusive a classe científica), nas escolas tal ideia era ensinada nas aulas de geografia, ciências, física entre outras disciplinas afins. O avanço das tecnologias e das próprias técnicas de observação do espaço sideral, acrescido de muito estudo, conduziu a física moderna a derivar outra conclusão sobre o questionamento acerca da extensão do Universo, doravante a esse processo, os físicos criaram um método para calcular o volume cúbico e chegaram ao número que é expresso da seguinte forma: o algarismo 3 e mais 72 zeros.</textarea> </div> </div> </div> </form> </div> </div> </div> </div>

As you can see in the example I put, the textarea doesn't adjust automatically. To auto adjust, I have to click inside the textarea and hit enter on the keyboard.

Can you help to solve this problem?

Answer 1

Solving the problem by replacing the following code:

$(".area1")
.delay(0)
.show(0, function() {
    var el1 = $(this);
    setTimeout(function () {
        el1.trigger('keyup');
    }, 100);        
});

per:

$("#add_data_Modal1").on("focus", ()=>$(".area1").keyup());

I made this change because the previous code fired any event when the modal opens, only when the script is loaded.