web-dev-qa-db-fra.com

Twitter bootstrap - Focus sur le texte dans un modal au clic)

Je viens juste de commencer à jouer avec bootstrap) et c'est incroyable.

J'essaie de comprendre cela. J'ai un textarea pour les commentaires à l'intérieur d'une fenêtre modale. Cela fonctionne très bien. Mais je veux que l'accent soit mis sur la zone de texte lorsque vous cliquez sur le bouton pour activer le modal. Et je n'arrive pas à le faire fonctionner.

Voici un violon: http://jsfiddle.net/denislexic/5JN9A/4/

Voici le code:

<a class="btn testBtn" data-toggle="modal" href="#myModal" >Launch Modal</a>

<div class="modal hide" id="myModal">
  <div class="modal-header">
    <button type="button" class="close" data-dismiss="modal">×</button>
    <h3>Modal header</h3>
  </div>
  <div class="modal-body">
      <textarea id="textareaID"></textarea>
  </div>
  <div class="modal-footer">
    <a href="#" class="btn" data-dismiss="modal">Close</a>
    <a href="#" class="btn btn-primary">Save changes</a>
  </div>
</div>​

Voici le JS

$('.testBtn').on('click',function(){
    $('#textareaID').focus();
});​

Pour reprendre Lorsque je clique sur "Lancer modal", je souhaite que le modal soit affiché et que le focus soit placé sur la zone de texte.

Merci pour toute aide.

javascriptjquerytwitter-bootstrapfocustextarea
68
denislexic

Cela ne fonctionne pas car lorsque vous cliquez sur le bouton, le modal n'est pas encore chargé. Vous devez associer le focus à un événement et aller à la page page des modaux de bootstrap nous voyons l'événement shown, que is fired when the modal has been made visible to the user (will wait for css transitions to complete). Et c'est exactement ce que nous voulons.

Essaye ça:

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

Voici votre violon mis à jour: http://jsfiddle.net/5JN9A/5/

Mise à jour:

Comme @ MrDBA note, dans Bootstrap 3 le nom de l'événement est modifié en shown.bs.modal. Donc, pour Bootstrap 3 utiliser:

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

Nouveau violon pour Bootstrap 3: http://jsfiddle.net/WV5e7/

202
scumah

Je voulais avoir une version déclarative de ceci, alors je suis allé avec ce qui suit:

$(document).ready(function() {
    $(".modal").on('shown.bs.modal', function () {
        $("[data-modalfocus]", this).focus();
    });
});

Vous pouvez ensuite simplement ajouter une propriété data-modalfocus à votre champ, comme suit:

<input type="text" data-modalfocus />

Et lorsque le mode modal apparaîtra, votre champ sera mis en évidence.

21
Alexandre Roger

Bootstrap3

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

Bootstrap 2

$(window.document).on('shown', '.modal', function() {
    window.setTimeout(function() {
        $('[autofocus]', this).focus();
    }.bind(this), 100);
});
11
Jonas Sciangula Street

Vous pouvez utiliser l'élément autofocus html pour définir la mise au point automatique.

<textarea id="textareaID" autofocus="" ></textarea>

Fiddle here (Click)

4
Chancho

Je voulais quelque chose d'un peu plus générique

    $(window.document).on('shown.bs.modal', '.modal', function () {
        var timer = window.setTimeout(function () {
            $('.firstInput', this).focus();
            typeof timer !== 'undefined' && window.clearTimeout(timer);
        }.bind(this), 100);
    });

Avec cela, je donne le contrôle que je veux à la classe CSS firstInput. Il y a un léger retard dans la mise au point qui lui donne un certain flair.

1
John Grabauskas

J'avais de gros problèmes en chrome ... J'espère que cela aide quelqu'un.

//When user clicks link
$('#login-modal-link').on('click',function() {
        setTimeout(function(){
                //If modal has class
            if ($('#login-modal').hasClass('modal')) {
                //Whatever input you want to focus in
                $('#user_login_modal').focus();
            }
        },100);

    });
1
Davis

Comme mentionné dans l'un des commentaires, vous devez supprimer fade de votre modal. Donc ça marche pour moi:

 <div id="myModal" class="modal">
    ...
    <textarea class="form-control" rows="5" id="note"></textarea>
  </div>

  <script>
    $('#myModal').on('shown.bs.modal', function () {
        $('#note').focus();
    })
  </script>
1
tokhi

Si votre modal a la propriété 'fade':

Cela fonctionnera, mais vous devrez peut-être ajuster la durée du délai d'attente et, bien entendu, les ID, le cas échéant:

$("#ID-of-modal").on('show', function(event){
                window.setTimeout(function(){
                  $(event.currentTarget).find('input#ID-of-input').first().focus()
                }, 0175);
              });
1
Semaj Nekeerv

Si vous utilisez bootstrap v3 et que vous utilisez à la fois une boîte de dialogue modale et l'éditeur de texte wysihtml5, les travaux suivants (en supposant que #basic est l'ID de votre formulaire modal):

    $('#basic').on('shown.bs.modal', function () {
    editor.composer.element.focus()
})
0
Ryan

Je ne sais pas pourquoi, mais la solution choisie ne fonctionne pas pour moi. J'utilise plutôt l'extrait de code suivant:

$('#annul-modal').on('show', function() {
    setTimeout(function() {$('textarea:first', '#annul-form').focus();}, 400);
});

Je sais que ce n'est pas si joli mais au moins ça marche .. Bootstrap v2.3.0

0
nKognito

Attacher l'événement directement à l'écran modal n'a pas fonctionné pour moi. J'utilise ce code à la place:

$('body').on('shown.bs.modal', '.modal', function () {
  $('[id$=myField]').focus();
})

Avec ce code, je n'ai besoin que de changer myField pour l'identifiant du contrôle sur lequel je souhaite avoir le focus, cela me permet également de définir le focus pour plusieurs écrans modaux. J'ai quelque chose comme:

      $('body').on('shown.bs.modal', '.modal', function () {
        $('[id$=YesCancel]').focus();
        $('[id$=YesInverted]').focus();
        $('[id$=cancelAddCustomer]').focus();
        $('[id$=closeHistoryModal]').focus();
      });

Source http://xcellerant.net/2014/08/06/set-focus-on-a-field-when-showing-a-bootstrap-3-modal/

0
Juan

Trouvé en train de faire:

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

Cela a bien fonctionné, car il ne trouve que le premier contrôle de formulaire au lieu d'avoir besoin d'un identifiant spécifique, etc. Soyez exactement ce dont vous avez besoin la plupart du temps.

0
SimonKiteley