2

Preciso focar um objeto após fechar o modal bootstrap

No bootstrap.dialog (antigo) eu consigo fazer pois posso programar no evento close do botão fechar, mas o fechar do bootstrap 4 é generico.

A ideia seria como abaixo:

    $("#btneditar").on("click", function () {

        var codcli = $("#codcli").val();
        if (codcli <= 0) {

            $("#aviso").modal();
            $(".body-aviso").html("Escolha o cliente para editar");
            $("#codcli").focus();
        } else {

            url = "minha url";
            window.location = url;
        }
    });

Como sabemos a linha (obj)focus perdera o foco ao fechar o modal

Como contornar essa situação?

0

2 Respostas 2

0

Use o evento da modal quando ela é fechada (documentação):

$('#aviso').on('hidden.bs.modal', function(){
   $("#codcli").focus();
});

O hidden.bs.modal executa uma função após a modal ser fechada.

Exemplo:

$("#btneditar").on("click", function () {

   var codcli = $("#codcli").val();
   if (codcli <= 0) {

      $("#aviso").modal();
      $(".body-aviso").html("Escolha o cliente para editar");
   
   } else {
      url = "minha url";
      window.location = url;
   }
});

$('#aviso').on('hidden.bs.modal', function(){
   $("#codcli").focus();
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.1.0/js/bootstrap.min.js"></script>
<link rel="stylesheet" type="text/css" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.1.0/css/bootstrap.min.css">

<div class="modal fade" id="aviso" tabindex="-1" role="dialog" aria-labelledby="exampleModalLabel" aria-hidden="true">
  <div class="modal-dialog" role="document">
    <div class="modal-content">
      <div class="modal-header">
        <h5 class="modal-title" id="exampleModalLabel">Modal title</h5>
        <button type="button" class="close" data-dismiss="modal" aria-label="Close">
          <span aria-hidden="true">&times;</span>
        </button>
      </div>
      <div class="modal-body">
         <p class="body-aviso"></p>
      </div>
      <div class="modal-footer">
        <button type="button" class="btn btn-secondary" data-dismiss="modal">Close</button>
        <button type="button" class="btn btn-primary">Save changes</button>
      </div>
    </div>
  </div>
</div>
<p>Clique no botão abaixo:</p>
<button id="btneditar">Editar</button>
<input id="codcli">

0

Arrumei uma solução temporária e vou colocar para os colegas, quem sabe surgem novas ideias...

var obj = null;    

$("#btneditar").on("click", function () {

    var codcli = $("#codcli").val();
    if (codcli <= 0) {

        $("#aviso").modal();
        $(".body-aviso").html("Escolha o cliente para editar");
        obj = $("#codcli");
    } else {

        url = "minha url";
        window.location = url;
    }
});

$("#btnclose").on("blur", function(){
   $(obj).focus();
});

Crio um objeto vazio e preencho na mensagem de aviso, quando o botão close é desfocado (no fechar) o foco vai para o objeto setado, assim funcionou, parece POG mas funciona.

Você deve fazer log-in para responder a esta pergunta.