Empresas
Empleos
  • Sobre nosotros
  • Soluciones
    • Publicación de vacantes
      Publica tu vacante y recibe candidatos calificados en 48h.
    • Evaluación de candidatos
      500+ pruebas técnicas y psicológicas, más anti-fraude.
    • Headhunting
      Búsqueda ejecutiva a la medida de principio a fin.
    • Nómina + EOR
      Dispersión de nómina y EOR en más de 15 países de LATAM.
  • Precios
  • Empleos

0

279
Vistas
How to set focus on first form element in any bootstrap modal

I have a select dropdown list and 2 input fields. I know how to set focus on first input field for ANY modal using :

$('.modal').on('shown.bs.modal', function () {
  $(this).find('input:text:visible:first').focus();
})

https://www.w3schools.com/code/tryit.asp?filename=FDG195P90CWU

But I can't see how to do when there are both dropdown lists and input fields.

over 4 years ago · Santiago Trujillo
2 Respuestas
Responde la pregunta

0

I think you might be looking for something like this: $("select:first").focus();

Here is the JQuery code:

$(document).ready(function(){
    $("#myBtn").click(function(){
        $("#myModal").modal();
    });

  $('.modal').on('shown.bs.modal', function () {
    //$(this).find('input:text:visible:first').focus();
    $("select:first").focus();
  })

});

When you run it you can see the select box is highlighted blue (at least in Chrome it is) I found this answer based on a similar question. Hope that helps

EDIT:

If you want it to select either the first text or select field you can use:

$(this).find('input[type=text],textarea,select').filter(':visible:first').focus();

If you need it to look for additional input fields (like password or radio button) you will need to add them in the find list. Another similar question asked here.

over 4 years ago · Santiago Trujillo Denunciar

0

Here's my solution developed on top of that by @craztmatt and others. I have extended to have the selection of the target element start at the modal that triggered the event.

// do this to make bootstrap modals auto-focus.
// delegate to body so that we only have to set it up once.
$('body').on('shown.bs.modal', function (e) {
    var ele = $(e.target).find('input[type=text],textarea,select').filter(':visible:first'); // find the first input on the bs modal
    if (ele) {ele.focus();} // if we found one then set focus.
})
over 4 years ago · Santiago Trujillo Denunciar
Responde la pregunta
Encuentra empleos remotos

¡Descubre la nueva forma de encontrar empleo!

Top de empleos
Top categorías de empleo
Empresas
Publicar vacante Precios Comercial
Legal
Términos y condiciones Política de privacidad
© 2026 PeakU Inc. All Rights Reserved.
Andres GPT
Recomiéndame algunas ofertas
Necesito ayuda