web-dev-qa-db-fra.com

Comment définir le focus d'un champ particulier dans un modal Bootstrap, une fois qu'il apparaît

J'ai déjà entendu quelques questions sur les modaux bootstrap, mais aucune ne correspond exactement à cela, je vais donc aller de l'avant. 

J'ai un modal que j'appelle onclick comme si ... 

$(".modal-link").click(function(event){
  $("#modal-content").modal('show');
});

Cela fonctionne bien, mais lorsque je montre le modal, je souhaite me concentrer sur le premier élément d'entrée ... Dans le cas où le premier élément d'entrée a l'identifiant #photo_name. 

Alors j'ai essayé

   $(".modal-link").click(function(event){
     $("#modal-content").modal('show');
     $("input#photo_name").focus();
   });

Mais c'était en vain. Enfin, j'ai essayé de me lier à l'événement 'show' mais malgré cela, l'entrée ne sera pas centrée. Enfin, juste pour tester, comme j’avais une suspicion, c’est à propos de l’ordre de chargement de js, j’ai mis un setTimeout juste pour voir si je retarde une seconde, le focus fonctionnera-t-il et oui, ça marche! Mais cette méthode est évidemment la merde. Existe-t-il un moyen d'avoir le même effet que ci-dessous sans utiliser setTimeout?

  $("#modal-content").on('show', function(event){
    window.setTimeout(function(){
      $(event.currentTarget).find('input#photo_name').first().focus()
    }, 0500);
  });
javascripttwitter-bootstrapmodal-dialog
182
jdkealy

Essaye ça

Voici l'ancienne démo :

EDIT: (Voici une démo avec Bootstrap 3 et jQuery 1.8.3)

$(document).ready(function() {
    $('#modal-content').modal('show');
    $('#modal-content').on('shown', function() {
        $("#txtname").focus();
    })
});

Le démarrage de bootstrap 3 nécessite l’utilisation de l’événement shown.bs.modal:

$('#modal-content').on('shown.bs.modal', function() {
    $("#txtname").focus();
})
369
gaurang171

Je voulais juste dire que Bootstrap 3 gère cela un peu différemment. Le nom de l'événement est "shown.bs.modal".

$('#themodal').on('shown.bs.modal', function () {
   $("#txtname").focus();
});

ou mettez l'accent sur la première entrée visible comme ceci:

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

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

76
David Beck

J'utilise ceci dans ma mise en page pour capturer tous les modaux et me concentrer sur la première entrée 

  $('.modal').on('shown', function() {
     $(this).find('input').focus();
  });
10
Joe Beams

J'ai eu le même problème avec bootstrap 3, focus quand je clique sur le lien, mais pas quand déclencher l'événement avec JavaScript. La solution:

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

C'est probablement quelque chose à propos de l'animation!

9
Alejandro Fiore

J'ai eu un problème pour attraper l'événement "shown.bs.modal" .. Et c'est ma solution qui fonctionne parfaitement ..

Au lieu de cela simple sur ():

$('#modal').on 'shown.bs.modal', ->

Utilisez on () avec un élément délégué:

$('body').on 'shown.bs.modal', '#modal', ->
8
Michal Macejko

Cela semble être dû au fait que l'animation modale est activée (fade dans la classe de la boîte de dialogue). Après avoir appelé .modal('show'), la boîte de dialogue n'est pas immédiatement visible. Elle ne peut donc pas être active pour l'instant.

Je peux penser à deux façons de résoudre ce problème:

  1. Supprimez fade de la classe afin que la boîte de dialogue soit immédiatement visible après l'appel de .modal('show'). Vous pouvez voir http://codebins.com/bin/4ldqp7x/4 pour une démonstration. (Désolé @keyur, j'ai modifié et enregistré par erreur comme nouvelle version de votre exemple)
  2. Appelez focus() dans l'événement shown comme ce que @keyur a écrit.
6
SAPikachu

J'ai créé un moyen dynamique d'appeler chaque événement automatiquement. Il est parfait pour concentrer un champ, car il appelle l'événement une seule fois, en le supprimant après utilisation.

function modalEvents() {
    var modal = $('#modal');
    var events = ['show', 'shown', 'hide', 'hidden'];

    $(events).each(function (index, event) {
        modal.on(event + '.bs.modal', function (e) {
            var callback = modal.data(event + '-callback');
            if (typeof callback != 'undefined') {
                callback.call();
                modal.removeData(event + '-callback');
            }
        });
    });
}

Il vous suffit d'appeler modalEvents() sur le document prêt.

Utilisation:

$('#modal').data('show-callback', function() {
    $("input#photo_name").focus();
});

Ainsi, vous pouvez utiliser le même mode pour charger ce que vous voulez sans vous soucier de supprimer les événements à chaque fois.

4
Danilo Colasso

J'ai eu le même problème avec le bootstrap 3 et résolu comme ceci:

$('#myModal').on('shown.bs.modal', function (e) {
    $(this).find('input[type=text]:visible:first').focus();
})

$('#myModal').modal('show').trigger('shown');
3
edercortes

Bootstrap a ajouté un événement chargé.

https://getbootstrap.com/docs/3.3/javascript/#modals

capturer l'événement 'Load.bs.modal' sur le modal

$('#mymodal').on('loaded.bs.modal', function(e) {
  // do cool stuff here all day… no need to change bootstrap
})
0
bharat

Spectacle modal bootstrap

$('#modal-content').on('show.bs.modal', function() {
$("#txtname").focus();

})

0
AdminDev826