Empresas
Empregos
  • Sobre nós
  • Soluções
    • Publicação de vagas
      Publique sua vaga e receba candidatos qualificados em 48h.
    • Avaliações de candidatos
      Mais de 500 testes técnicos e psicológicos, mais anti-fraude.
    • Headhunting
      Busca executiva personalizada do início ao fim.
    • Folha de Pagamento + EOR
      Dispersão de folha e EOR em mais de 15 países da LATAM.
  • Preços
  • Empregos

0

291
Visualizações
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 Respostas
Responde à pergunta

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 Relatório

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 Relatório
Responde à pergunta
Encontrar trabalhos remotos

Descubra a nova forma de encontrar um emprego!

melhores empregos
Principais categorias de trabalho
Empresas
Postar vaga Preços Comercial
Jurídico
Termos e Condições Política de privacidade
© 2026 PeakU Inc. All Rights Reserved.
Andres GPT
Recomende algumas ofertas para mim
Preciso de ajuda