Autofocus entrée dans twitter bootstrap modal

J'ai un tel problème - j'ai besoin de l'autofocus à certains de ses éléments à l'intérieur de twitter bootstrap modal (après qu'il montre). La partie la plus délicate est ici - le contenu de ce modal est chargé à l'aide de données à distance' (jQuery.la méthode de chargement) à partir du fichier HTML distinct, de sorte

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

ne fonctionne que si modale a été chargé avant.

La question est - comment faire de l'autofocus de travail à la première fois modale des charges?

InformationsquelleAutor eawer | 2013-02-18
  1. 98

    Je suis en utilisant Bootstrap 3.0 (espérons que cela fonctionne avec 3.1 ainsi).

    Nous avons dû utiliser tabindex="-1", car cela permet la touche ÉCHAP pour fermer la modale.

    J'ai donc été en mesure de résoudre ce problème à l'aide de:

    //Every time a modal is shown, if it has an autofocus element, focus on it.
$('.modal').on('shown.bs.modal', function() {
  $(this).find('[autofocus]').focus();
});
    • c'est la réponse pour la 3.0 et jusqu'
    • Remarque: si vous chargez du contenu distant par le biais des données-activer le lien, alors vous devriez utiliser l'événement de loaded.bs.modal, puis il poursuivra également les travaux que vous fermez puis rouvrez-modale.
    • Voir aussi @paul-oliver solution si votre modal n'existe pas au moment où vous créez/affectation de ce gestionnaire.
    • Cette réponse est correcte si la modale de balisage existe déjà par le temps ce JavaScript est exécuté. Si vous travaillez avec dynamique de balisage, voir la réponse de @paul-oliver
    InformationsquelleAutor nc.
  2. 26

    essayez de supprimer tabindex="-1" et il fonctionne très bien.

    <div class="modal fade" id="modalID" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true">

<div class="modal fade" id="modalID" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true">

    Espérons que cette aide!

    • whoa - c'était la seule réponse que j'ai trouvé qui a résolu ce. en fait, vous pouvez simplement ajouter l'attribut autofocus et il sera tout simplement travailler.
    • Quand j'enlève tabindex="-1" il est possible d'onglet et activer les boutons à l'extérieur de la modale. La solution fournie par nc. a travaillé pour moi.
    • Salut, juste envie de doubler vérifier sur cette solution, j'ai essayer celui-là, ça fonctionne, mais juste une fois. Avez-vous les gars, vous remarquez que l'un? Ensuite, j'essaie @nc. réponse et il fonctionne parfaitement, même avec les tabindex="-1"
    InformationsquelleAutor nooweel
  3. 16

    Je ne pouvais pas obtenir @nc de la solution de travail sur mon application. Il n'a pas voir les auxiliaires modaux qui ont été ajoutés plus tard. Cela a fonctionné pour moi, même si

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

    Comme Frank Fang points, vous devez utiliser cette option si vous utilisez une version plus récente de Bootstrap qui ne repose pas sur la autofocus attribut HTML.

    $('#myModal').on('shown.bs.modal', function () {
  //get the locator for an input in your modal. Here I'm focusing on
  //the element with the id of myInput
  $('#myInput').focus()
})
    • Je pense que c'est la solution que j'avais utiliser pour les auxiliaires modaux qui n'existent pas dans les DOM lorsque le JS s'exécute en premier.
    InformationsquelleAutor Paul Oliver
  4. 3

    Réponses ci-dessus sont un peu obsolètes pour la dernière version de Bootstrap versions.

    Ci-dessous est extrait de: http://getbootstrap.com/javascript/#modals

    En raison de la façon dont HTML5 définit sa sémantique, la autofocus attribut HTML
    n'a aucun effet dans le Bootstrap des modaux. Pour obtenir le même effet, l'utilisation
    certains JavaScript personnalisé:

    $('#myModal').on('shown.bs.modal', function () {
  $('#myInput').focus()
})
    InformationsquelleAutor Frank Fang
  5. 0

    Vous disposez d'une entrée avec la autofocus attribut que vous souhaitez concentré lors de l'amorçage modale est affichée.

    Est votre modal balisage disponible lorsque le JavaScript est chargé?

    Enregistrer un gestionnaire d'événement sur tous les .modal éléments pour la shown.bs.modal événement

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

    Est votre modal de balisage généré dynamiquement?

    Inscrire un gestionnaire d'événements sur l'ensemble du document pour le shown.bs.modal événement.

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