Como definir o foco para a primeira entrada de texto em um modal de bootstrap após mostrado
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 () {
Mas agora ele se concentra na entrada por um momento e depois desaparece automaticamente, por que isso está acontecendo e como resolver?
Você pode fornecer uma demonstração em jsfiddle.net ?
Tente definir um tempo limite para isso, outra coisa pode estar interferindo. setTimeout(function() { /* Your code */ }, 100);
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
@scumah tem a resposta para você: Twitter bootstrap - concentre-se na textarea dentro de um modal com um clique
Para Bootstrap 2
Atualização: Para Bootstrap 3
========== 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/
<button ... data-target="#myModal1"> ... </button>
<div class="modal fade" id="myModal1" ...>
<div class="modal-body"> <textarea id="textareaID1" ...></textarea></div>
$('#textareaID1').focus();
isso funciona apenas se houver um modal na página? e se mais de um?
ótima resposta rápida! Cometi um erro bobo, funciona agora!
+1 Mudando meu código de "show" para "mostrado" conforme li em sua resposta, depois de quase uma hora tentando fazer isso funcionar.
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ê.
Achei a melhor maneira de fazer isso, sem jQuery.
<input value="" autofocus>
Este é um atributo html5. Suportado por todos os principais navegadores.
— Tmarois
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
Aqui está como você pode fazer isso em um controle MVC3: @Html.TextBoxFor(m => m.UserName, new { @autofocus="" })
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 ().
Isso funciona se você remover tabdindex="-1"do modal, mas só funciona uma vez. Fechar e reabrir não tem foco.
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:
— Marcos Furquim
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 :(
sim, mas hoje, no meu novo projeto, usei <input value="" autofocus>e funcionei bem pra mim dessa vez, estranho
O correto é usar o evento mostrado.bs.modal
Em vez de usar setTimeout (), você pode usar delay () como segue ... $ ('# textareaID'). Delay (1000) .focus (). Select ();
Definitivamente, a solução de correção.
O código usual (abaixo) não funciona para mim:
Encontrei a solução :
$('body').on('shown.bs.modal', '#myModal', function () {
$('input:visible:enabled:first', this).focus();
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:
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
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
Esta é a melhor solução mais geral que já vi aqui :)
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
tente este código, pode funcionar para você
$(this).find('input:text')[0].focus();
— Jitesh Tukadiya
Aqui está o que eu uso:$(this).find('input:text').first().focus()
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.
// Set modal form input to autofocus when autofocus attribute is set
$(this).find($.attr('autofocus')).focus();
— Fendi Septiawan
usei $ (this) .find ('[autofocus]'). focus (); e funciona
— SummerRain
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:
$(this).find('input:first').focus();
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:
$(this).find( 'input:visible:first').focus();
Se o seu modal for carregado usando ajax, use este:
$(this).find('input:visible:first').focus();
— Hassan ALAMI
esta é a solução mais geral
$(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
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 .
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.