3

espero puedan ayudarme, tengo una ventana modal que el autofocus funciona solo la primera vez que se usa, en las siguientes ya no, mi proyecto tiene un listado de productos y cuando selecciona el producto aparece la siguiente modal, pero solo funciona la primera vez, les muestro el codigo de la modal. quiero hacer que el autofocus funcione todas las veces que yo le de click en

<div class="modal fade" id="ModalProducto" role="dialog" aria-labelledby="exampleModalProducto" aria-hidden="true" data-keyboard="false" data-backdrop="static">
        <div class="modal-dialog" role="document">
          <div class="modal-content">
            <div class="modal-header">
              <div class="row col-md-12 text-center">
                <div class="col-md-4">Existencia</div>
                <div class="col-md-4">Precio</div>
                <div class="col-md-4">Cantidad</div>
              </div>
            </div>
            <div class="modal-body col-md-12 row center">
              <div class="col-md-4">
                <input type="text" v-model="existencia" class="form-control" readonly="readonly">
              </div>
              <div class="col-md-4">
                <input type="text" v-model="pre" class="form-control" readonly="readonly">
              </div>
              <div class="col-md-4">
                <input type="number" class="form-control focus" name="" autofocus v-model.number="canti" @keydown.enter.prevent="noenter">
              </div><br><br>
            </div>
            <div class="modal-footer">
              <td><a href="#" class="btn btn-primary" data-dismiss="modal" aria-label="Close" v-on:click.prevent="agregarFila">Agregar</a></td>
              <td><a href="#" class="btn btn-secondary" data-dismiss="modal" aria-label="Close">Cancelar</a></td>
            </div>
          </div>
        </div>
      </div>

Por si sirviera de algo este es el codido que llama a la modal:

<tbody v-show="mayus">
            <tr v-for="(producto, index) in FiltroProducto">
              <td>@{{producto.producto}}</td>
              <td>@{{producto.marca}}</td>
              <td>@{{producto.categoria.toUpperCase()}}</td>
              <td><a href="" class="btn btn-success" data-toggle="modal" data-target="#ModalProducto" @click.prevent="verProducto(producto)">+</a></td>
              <td><a href="#" @click.prevent="ver(producto)" class="btn btn-info">*</a></td>
            </tr>
          </tbody>
1
  • El atributo autofocus es booleano, recibe un parametro autofocus="true" Commented el 1 ago. 2019 a las 12:07

1 respuesta 1

7

El atributo autofocus te funciona la primera vez porque cuando cierras una modal esta lo que hace es ocultarse, no se destruye, por lo que ese autofoco no vuelve a ejecutarse una vez lo ha perdido.

La solución que se me ocurre es gestionar ese foco mediante JQuery. Podemos reaccionar a cuando una modal de Bootstrap se abre por medio de la función on('shown.bs.modal'), así podríamos hacer que cada vez que la modal sea abierta podamos colocar el foco en el elemento deseado.

$(function () {
  $('#ModalProducto').on('shown.bs.modal', function (e) {
    $('.focus').focus();
  })
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css" crossorigin="anonymous">
<script src="https://code.jquery.com/jquery-3.2.1.slim.min.js" integrity="sha384-KJ3o2DKtIkvYIK3UENzmM7KCkRr/rE9/Qpg6aAZGJwFDMVNA/GpGFF93hXpG5KkN" crossorigin="anonymous"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.12.9/umd/popper.min.js" integrity="sha384-ApNbgh9B+Y1QKtv3Rn7W3mgPxhU9K/ScQsAP7hUibX39j7fakFPskvXusvfa0b4Q" crossorigin="anonymous"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/js/bootstrap.min.js" integrity="sha384-JZR6Spejh4U02d8jOt6vLEHfe/JQGiRRSQQxSfFWpi1MquVdAyjUar5+76PVCmYl" crossorigin="anonymous"></script>

<div class="modal fade" id="ModalProducto" role="dialog" aria-labelledby="exampleModalProducto" aria-hidden="true" data-keyboard="false" data-backdrop="static">
        <div class="modal-dialog" role="document">
          <div class="modal-content">
            <div class="modal-header">
              <div class="row col-md-12 text-center">
                <div class="col-md-4">Existencia</div>
                <div class="col-md-4">Precio</div>
                <div class="col-md-4">Cantidad</div>
              </div>
            </div>
            <div class="modal-body col-md-12 row center">
              <div class="col-md-4">
                <input type="text" v-model="existencia" class="form-control" readonly="readonly">
              </div>
              <div class="col-md-4">
                <input type="text" v-model="pre" class="form-control" readonly="readonly">
              </div>
              <div class="col-md-4">
                <input type="number" class="form-control focus">
              </div><br><br>
            </div>
            <div class="modal-footer">
              <td><a href="#" class="btn btn-primary" data-dismiss="modal" aria-label="Close" v-on:click.prevent="agregarFila">Agregar</a></td>
              <td><a href="#" class="btn btn-secondary" data-dismiss="modal" aria-label="Close">Cancelar</a></td>
            </div>
          </div>
        </div>
      </div>
      
      <tbody v-show="mayus">
            <tr v-for="(producto, index) in FiltroProducto">
              <td>Nombre</td>
              <td>Marca</td>
              <td>Categoría</td>
              <td><a id="nuevo_producto" href="" class="btn btn-success" data-toggle="modal" data-target="#ModalProducto" @click.prevent="verProducto(producto)">+</a></td>
              <td><a href="#" onclick="ver(producto)" class="btn btn-info">*</a></td>
            </tr>
          </tbody>

5
  • Una pregunta, este codigo resulta al colocarlo solo así? te pregunto porque le agregue las etiquetas de script y le pegue ese codigo solo asi como lo tienes y no funciona, que podrá ser? soy novato para javascript, pero nunca he usado algo como esto "$(function ()" Commented el 1 ago. 2019 a las 19:01
  • $(function () {...}) es una función de Jquery que se ejecuta cuando el DOM termina de cargarse. Se usa para no tratar de referenciar elementos que aun no están accesibles por no haber terminado de cargar. Jquery se trata de una librería de Javascript, que Bootstrap necesita para funcionar y que deberías tener cargada en un script del tipo que tengo yo cargados al inicio del HTML de mi respuesta. En la consola del navegador es posible que se te esté mostrando un error, compruébalo y me dices.
    – phpMyGuel
    Commented el 1 ago. 2019 a las 19:27
  • encontré este otro codigo para poder hacer lo que quiero, pero tampoco me funciona, creo que es algo mas. te mostraré <script type="text/javascript"> $('.modal').on('shown.bs.modal', function() { $(this).find('[autofocus]').focus(); }); @yield('jscript') </script> este yield va adjunto al archivo donde esta la ventana modal del inicio del hilo, y lo tengo hasta el final del documento, tendría que mover el yield(´jscript´) la principio para que funcione? si pudieras tal vez darme tu correo y te envio todo el codigo Commented el 1 ago. 2019 a las 19:45
  • Ya lo logré hacer, muchas gracias, me faltaba agregar todas las librerías que tienes en la parte de arriba del código. Commented el 2 ago. 2019 a las 3:10
  • 1
    ¡Me alegro! Marcar las respuestas que te sirvieron como aceptadas es una buena practica, ya que así personas con un problema similar al tuyo y que entren a la pregunta sabrán que se obtuvo una solución.
    – phpMyGuel
    Commented el 2 ago. 2019 a las 8:46

Tu Respuesta

By clicking “Publica tu respuesta”, you agree to our terms of service and acknowledge you have read our privacy policy.

¿No es la respuesta que buscas? Examina otras preguntas con la etiqueta o formula tu propia pregunta.