Como definir o foco para a primeira entrada de texto em um modal de bootstrap após mostrado

116

Eu carrego um modal de bootstrap dinâmico e contém algumas entradas de texto. O problema que enfrento é que quero que o cursor se concentre na primeira entrada neste modal, e isso não está acontecendo por padrão.
Então, escrevi este código para fazer isso:

$('#modalContainer').on('show', function () {
   $('input:text:visible:first').focus();
});

Mas agora ele se concentra na entrada por um momento e depois desaparece automaticamente, por que isso está acontecendo e como resolver?

Amr Elgarhy
fonte
2
Você pode fornecer uma demonstração em jsfiddle.net ?
indefinido
Tente definir um tempo limite para isso, outra coisa pode estar interferindo. setTimeout(function() { /* Your code */ }, 100);
qwerty
você pode tentar isso para mim ... var index = 0; $ ('# modalContainer'). on ('mostrar', função () {índice = 1;}); if (index) {$ ('input: text: visible: first'). focus (); }
chirag ghiyad
Possível duplicata do foco do campo de entrada modal de bootstrap
Muhammad Rehan Saeed

Respostas:

186

@scumah tem a resposta para você: Twitter bootstrap - concentre-se na textarea dentro de um modal com um clique

Para Bootstrap 2

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

Atualização: Para Bootstrap 3

$('#myModal').on('shown.bs.modal', function () {
    $('#textareaID').focus();
})  

========== Atualizar ======

Em resposta a uma pergunta, você pode usar isso com vários modais na mesma página se especificar diferentes destinos de dados, renomear seus IDs modais para corresponder e atualizar os IDs dos campos de entrada do formulário e, finalmente, atualizar seu JS para corresponder a esses novos IDs:
consulte http://jsfiddle.net/panchroma/owtqhpzr/5/

HTML

...
<button ... data-target="#myModal1"> ... </button> 
... 
<!-- Modal 1 -->
<div class="modal fade" id="myModal1" ...>
... 

<div class="modal-body"> <textarea id="textareaID1" ...></textarea></div>

JS

$('#myModal1').on('shown.bs.modal', function() {
  $('#textareaID1').focus();
})
David Taiaroa
fonte
isso funciona apenas se houver um modal na página? e se mais de um?
Ramesh Pareek
ótima resposta rápida! Cometi um erro bobo, funciona agora!
Ramesh Pareek
+1 Mudando meu código de "show" para "mostrado" conforme li em sua resposta, depois de quase uma hora tentando fazer isso funcionar.
Exel Gamboa
Isso dá erro máximo de pilha de chamadas quando a validação do jquery é acionada. Portanto, isso é inútil para mim.
Vandita
@Vandita, se você quiser começar uma caneta no codepen.io que ilustre o problema que você descreve, ficarei feliz em olhar para você.
David Taiaroa
80

Achei a melhor maneira de fazer isso, sem jQuery.

<input value="" autofocus>

funciona perfeitamente.

Este é um atributo html5. Suportado por todos os principais navegadores.
https://developer.mozilla.org/en-US/docs/Web/HTML/Element/Input

Tmarois
fonte
Depois de passar algumas horas tentando fazer este trabalho como deveria (clique ou nos manipuladores), encontrei apenas um método que funciona, que é o atributo autofocus html5:<input type="text" class="form-control" placeholder="" autofocus>
lot0logs
1
Aqui está como você pode fazer isso em um controle MVC3: @Html.TextBoxFor(m => m.UserName, new { @autofocus="" })
Flea
19
Não funcionou para mim ... depois de mostrar o modal de bootstrap a entrada perde o foco
Diego Cotini
Eu também vejo o foco de ganho de entrada por um momento após o modal bootstrap aparecer ao usar o foco automático. No entanto, a entrada perde o foco. Tive que implementar o manipulador .on ().
raddevus
7
Isso funciona se você remover tabdindex="-1"do modal, mas só funciona uma vez. Fechar e reabrir não tem foco.
Memet Olsen
42

A resposta de David Taiaroa está correta, mas não funciona porque o tempo de "fade in" do modal não permite que você defina o foco na entrada. Você precisa criar um atraso:

$('#myModal').on('shown.bs.modal', function () {
    ...
    setTimeout(function (){
        $('#textareaID').focus();
    }, 1000);

})
Marcos Furquim
fonte
2
Você é o único certo aqui. Sua solução é a única que funciona. Tentei definir um valor menor para timeOut, mas não funcionou. Parece que o modal "termina de carregar" em 1000 ms :(
Enrique
1
sim, mas hoje, no meu novo projeto, usei <input value="" autofocus>e funcionei bem pra mim dessa vez, estranho
Marcos Furquim
3
O correto é usar o evento mostrado.bs.modal
Akhorus
2
Em vez de usar setTimeout (), você pode usar delay () como segue ... $ ('# textareaID'). Delay (1000) .focus (). Select ();
Tony
Definitivamente, a solução de correção.
Frank Thomas
18

O código usual (abaixo) não funciona para mim:

$('#myModal').on('shown.bs.modal', function () {
  $('#myInput').focus()
})

Encontrei a solução :

$('body').on('shown.bs.modal', '#myModal', function () {
    $('input:visible:enabled:first', this).focus();
})

veja mais aqui

Éderson T. Szlachta
fonte
9

Recebi que o bootstrap adicionou as seguintes informações na página:

Devido à forma como o HTML5 define sua semântica, o atributo autofocus HTML não tem efeito nos modais do Bootstrap. Para obter o mesmo efeito, use algum JavaScript personalizado:

$('#myModal').on('shown.bs.modal', function () {
  $('#myInput').focus()
})

http://getbootstrap.com/javascript/#modals

Amr Elgarhy
fonte
7

Este é o código simples que funcionará melhor para você em todos os pop-ups que tenham qualquer campo de entrada com foco

$(".modal").on('shown.bs.modal', function () {
    $(this).find("input:visible:first").focus();
});
Junaid Anwar
fonte
4

Acho que a resposta mais correta, assumindo o uso de jQuery, é uma consolidação de aspectos de todas as respostas desta página, mais o uso do evento que o Bootstrap passa:

$(document).on('shown.bs.modal', function(e) {
  $('input:visible:enabled:first', e.target).focus();
});

Igualmente trabalharia mudando $(document)para $('.modal')ou para adicionar uma classe para o modal que os sinais de que esse foco deve ocorrer, como$('.modal.focus-on-first-input')

Phil Hodgson
fonte
2
Esta é a melhor solução mais geral que já vi aqui :)
Martin T.
Se você também deseja que ele ignore as caixas de texto somente leitura, modifique a linha para ler: $ ('input: visible: enabled: not ([readonly]): first', e.target) .focus ();
Douglas Timms
3

tente este código, pode funcionar para você

$(this).find('input:text')[0].focus();
Jitesh Tukadiya
fonte
1
Aqui está o que eu uso:$(this).find('input:text').first().focus()
Jimmy
1

Primeiro passo, você deve definir seu autofocusatributo na entrada do formulário.

<input name="full_name" autofocus/>

E então você tem que adicionar uma declaração para definir o foco automático de sua entrada depois que seu modal for mostrado.
Experimente este código:

$(document).on('ready', function(){
    // Set modal form input to autofocus when autofocus attribute is set
    $('.modal').on('shown.bs.modal', function () {
        $(this).find($.attr('autofocus')).focus();
    });
});
Fendi Septiawan
fonte
usei $ (this) .find ('[autofocus]'). focus (); e funciona
SummerRain
0

Se você deseja focar automaticamente qualquer modal que foi aberto, você pode colocar em seus padrões ou funções lib este trecho que se concentrará na primeira entrada:

$('.modal').on('shown.bs.modal', function () {
  $(this).find('input:first').focus();
})
Gabriel rodrigues
fonte
0

se você estiver procurando por um snippet que funcione para todos os seus modais e procurar automaticamente pelo primeiro texto de entrada no aberto, você deve usar isto:

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

Se o seu modal for carregado usando ajax, use este:

$(document).on('shown.bs.modal', '.modal', function() {
    $(this).find('input:visible:first').focus();
});
Hassan ALAMI
fonte
0

esta é a solução mais geral

$('body').on('shown.bs.modal', '.modal', function () {
    $(this).find(":input:not(:button):visible:enabled:not([readonly]):first").focus();
});
  • funciona com modais adicionados ao DOM após o carregamento da página
  • funciona com input, textarea, select e não com o botão
  • omite oculto, desativado, somente leitura
  • funciona com modais desbotados, sem necessidade de setInterval
DanCZ
fonte
0

Tente remover a propriedade tabIndex do modal , quando sua caixa de entrada / texto estiver aberta. Volte ao que sempre foi , quando você fecha a caixa de entrada / texto. Isso resolveria o problema independentemente da versão do bootstrap e sem comprometer o fluxo de experiência do usuário .

Pathik
fonte
0

De acordo com a documentação do Bootstrap 4:

Devido à forma como o HTML5 define sua semântica, o atributo autofocus HTML não tem efeito nos modais do Bootstrap. Para obter o mesmo efeito, use algum JavaScript personalizado.

Por exemplo:

$('#idOfMyModal').on('shown.bs.modal', function () {
    $('input:first').trigger('focus')
});

Link .

odeio
fonte
0

Use o foco automático para pesquisar o elemento de formulário correto:

$('.modal').on('shown.bs.modal', function() {
  $(this).find('[autofocus]').focus();
});
gal007
fonte
-1
$(document).ready(function() {
  $("#button").click(function() {
    $('#mymodal').on('shown.bs.modal', function() {
      $('#myinput').focus();
    })
  });
});
  • É o "#button" que chama o formulário modal,

  • "#mymodal" é a forma modal,

  • "#myinput" é a entrada que você deseja obter foco

Jenrry Leguia
fonte