web-dev-qa-db-fra.com

Entrée autofocus en mode bootstrap Twitter

J'ai un tel problème - j'ai besoin de mettre au point un élément dans le boot modal de Twitter (après que cela se voit). La partie la plus délicate est la suivante: le contenu de ce modal est chargé à l'aide de 'data-remote' (méthode jQuery.load) à partir d'un fichier HTML séparé.

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

ne fonctionne que si modal a été chargé auparavant. 
La question est de savoir comment faire fonctionner l'autofocus lors du chargement modal pour la première fois.

jquerytwitter-bootstrapmodal-dialog
46
Shtirlits

J'utilise Bootstrap 3.0 (j'espère que cela fonctionne également avec la version 3.1).

Nous avons dû utiliser tabindex="-1" car cela permet à la touche ESC de fermer le modal.

J'ai donc pu résoudre ce problème en utilisant:

// 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();
});
92
nc.

essayez de supprimer tabindex = "- 1" et cela fonctionne 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">

J'espère que cela t'aides!

25
nooweel

La solution de @ nc ne fonctionnait pas sur mon application. Il n'a pas vu les modaux qui ont été ajoutés plus tard. Cela a fonctionné pour moi si

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

Comme le souligne Frank Fang, vous devriez l'utiliser si vous utilisez une version plus récente de Bootstrap qui ne repose pas sur l'attribut HTML autofocus.

$('#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()
})
14
Paul Oliver

Les réponses ci-dessus sont quelque peu obsolètes pour les dernières versions de Bootstrap.

Voici un extrait de: http://getbootstrap.com/javascript/#modals

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

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

Vous avez une entrée avec l'attribut autofocus que vous voulez mettre en évidence lorsque le modal bootstrap est affiché.

Votre balisage modal est-il disponible lorsque JavaScript est chargé?

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

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

Votre balisage modal est-il généré dynamiquement?

Enregistrez un gestionnaire d’événements sur l’ensemble du document pour l’événement shown.bs.modal.

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