在模態框內編輯表單時的動態文本區域

Question

在這里，我放了我試圖讓 textarea 在打開模式時動態調整大小的代碼。

 $(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>

正如您在我放置的示例中所看到的，textarea 不會自動調整。 要自動調整，我必須在文本區域內單擊並按鍵盤上的 Enter。

你能幫忙解決這個問題嗎？

Answer 1

通過替換以下代碼解決問題：

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

每：

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

我進行了此更改，因為之前的代碼在模式打開時觸發了任何事件，僅在加載腳本時。