dynamic textarea when editing form inside a modal

Viewed 62

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?

1 Answers

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.

Related