Comment mettre l'accent sur la première entrée de texte dans une modale bootstrap après son affichage ?

Question

Je charge une modale bootstrap dynamique et elle contient quelques entrées de texte. Le problème auquel je suis confronté est que je veux que le curseur se concentre sur la première entrée dans cette modale, et cela ne se produit pas par défaut.
J'ai donc écrit ce code pour le faire :

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

Mais maintenant il se concentre sur l'entrée pendant un moment puis s'en va automatiquement, pourquoi cela se produit-il et comment le résoudre ?

Answer 1

@scumah a la réponse pour vous : Twitter bootstrap - Focus sur le textarea à l'intérieur d'une modale au clic

Pour Bootstrap 2

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

Mise à jour : Pour Bootstrap 3

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

\========== Mise à jour ======

En réponse à une question, vous pouvez utiliser cette méthode avec plusieurs modales sur la même page si vous spécifiez des cibles de données différentes, si vous renommez les ID de vos modales pour qu'elles correspondent et mettent à jour les ID des champs de saisie du formulaire, et enfin si vous mettez à jour votre JS pour qu'il corresponde à ces nouveaux ID :
voir 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();
})

Answer 2

J'ai trouvé la meilleure façon de le faire, sans jQuery.

<input value="" autofocus>

fonctionne parfaitement.

Il s'agit d'un attribut html5. Pris en charge par tous les principaux navigateurs.
https://developer.mozilla.org/en-US/docs/Web/HTML/Element/Input

Answer 3

La réponse de David Taiaroa est correcte, mais ne fonctionne pas parce que le temps de "fondu" de la modale ne vous permet pas de définir le focus sur l'entrée. Vous devez créer un délai :

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

})

Answer 4

Le code habituel (ci-dessous) n'est pas travailler pour moi :

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

J'ai trouvé le solution :

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

Answer 5

J'ai obtenu que bootstrap ajoute l'info suivante sur leur page :

En raison de la manière dont HTML5 définit sa sémantique, l'attribut HTML autofocus n'a aucun effet dans les fenêtres modales Bootstrap. Pour obtenir le même effet, utilisez du JavaScript personnalisé :

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

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