Come impostare lo stato attivo sul primo input di testo in una modalità bootstrap dopo la visualizzazione

Carico un modal bootstrap dinamico e contiene pochi input di testo. Il problema che devo affrontare è che voglio che il cursore si concentri sul primo input in questo modale, e questo non accade per impostazione predefinita.
Quindi ho scritto questo codice per farlo:

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

Ma ora si concentra sull'input per un attimo poi scompare automaticamente, perché sta succedendo e come risolverlo?

@scumah ha la risposta per te: Bootstrap di Twitter - Concentrati sulla textarea all'interno di una modale al clic

Per Bootstrap 2

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

Aggiornamento: per Bootstrap 3

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

========== Aggiorna ======

In risposta a una domanda, puoi usarlo con più modali sulla stessa pagina se specifichi diversi target di dati, rinomina i tuoi ID modali per abbinare e aggiornare gli ID dei campi di input del modulo e infine aggiorna il tuo JS in modo che corrisponda a questi nuovi ID:
vedere 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();
})

Ho trovato il modo migliore per farlo, senza jQuery.

<input value="" autofocus>

funziona perfettamente.

Questo è un attributo html5. Supportato da tutti i principali browser.
https://developer.mozilla.org/en-US/docs/Web/HTML/Element/Input

La risposta di David Taiaroa è corretta, ma non funziona perché il tempo per "sfumare" il modale non ti consente di concentrarti sull'input. Devi creare un ritardo:

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

})

Il solito codice (sotto) non funziona per me:

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

Ho trovato la soluzione :

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

vedere di più qui

Ho ricevuto quel bootstrap che ha aggiunto le seguenti informazioni sulla loro pagina:

A causa del modo in cui HTML5 definisce la sua semantica, l'attributo HTML autofocus non ha effetto nelle modali Bootstrap. Per ottenere lo stesso effetto, utilizza un JavaScript personalizzato:

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

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

Questo è il codice semplice che funzionerà meglio su tutti i popup che hanno un campo di input con messa a fuoco

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

Penso che la risposta più corretta, ipotizzando l'uso di jQuery, sia un consolidamento di aspetti di tutte le risposte in questa pagina, più l'uso dell'evento che Bootstrap passa:

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

E sarebbe anche lavorare cambiando $(document)per $('.modal')o per aggiungere una classe al modale che i segnali che dovrebbero verificarsi questa attenzione, come$('.modal.focus-on-first-input')

prova questo codice, potrebbe funzionare per te

$(this).find('input:text')[0].focus();

Primo passaggio, devi impostare il tuo autofocusattributo sull'input del modulo.

<input name="full_name" autofocus/>

E poi devi aggiungere la dichiarazione per impostare l'autofocus del tuo input dopo che il tuo modale è mostrato.
Prova questo codice:

$(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();
    });
});

Se vuoi solo mettere a fuoco automaticamente qualsiasi modale che era aperto, puoi inserire modelli o funzioni lib in questo frammento che si concentrerà sul primo input:

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

se stai cercando uno snippet che funzioni per tutti i tuoi modali e cerchi automaticamente il primo testo di input in quello aperto, dovresti usare questo:

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

Se il tuo modale viene caricato usando ajax, usa questo invece:

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

questa è la soluzione più generale

$('body').on('shown.bs.modal', '.modal', function () {
    $(this).find(":input:not(:button):visible:enabled:not([readonly]):first").focus();
});

• funziona con le modali aggiunte al DOM dopo il caricamento della pagina
• funziona con input, textarea, select e non con il pulsante
• Impegna nascosto, disabilitato, sola lettura
• funziona con modali sbiaditi, non necessita di setInterval

Prova a rimuovere la proprietà tabIndex del modal , quando la tua casella di testo / input è aperta. Riportalo a quello che era mai stato , quando chiudi input / textbox. Ciò risolverebbe il problema indipendentemente dalla versione bootstrap e senza compromettere il flusso dell'esperienza utente .

Secondo i documenti di Bootstrap 4:

A causa del modo in cui HTML5 definisce la sua semantica, l'attributo HTML autofocus non ha effetto nelle modali Bootstrap. Per ottenere lo stesso effetto, utilizza JavaScript personalizzato.

Per esempio:

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

Link .

Usa l'autofocus per cercare l'elemento corretto del modulo:

$('.modal').on('shown.bs.modal', function() {
  $(this).find('[autofocus]').focus();
});

$(document).ready(function() {
  $("#button").click(function() {
    $('#mymodal').on('shown.bs.modal', function() {
      $('#myinput').focus();
    })
  });
});

• È "#button" che chiama il modulo modale,

• "#mymodal" è la forma modale,

• "#myinput" è l'input su cui vuoi mettere a fuoco