web-dev-qa-db-fra.com

Comment définir le focus sur la première entrée de texte dans un modal bootstrap après affichage

Je charge un modal d'amorçage dynamique et il contient quelques entrées de texte. Le problème auquel je suis confronté est que je souhaite que le curseur se concentre sur la première entrée de ce mode, et cela ne se produit pas par défaut.
Alors j'ai é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?

jquerytwitter-bootstrap
92
Amr Elgarhy

@scumah a la solution pour vous: Twitter bootstrap - Focus sur textarea dans un modal 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 l'utiliser avec plusieurs modaux sur la même page si vous spécifiez des cibles de données différentes, renommez les ID de vos modaux pour qu'ils correspondent, modifiez les ID des champs de saisie du formulaire et mettez enfin à jour votre JS afin qu'il corresponde à ces nouvelles. 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();
})
148
David Taiaroa

J'ai trouvé le meilleur moyen de faire cela, sans jQuery. 

<input value="" autofocus>

marche parfaitement.

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

69
timothymarois

La réponse de David Taiaroa est correcte, mais ne fonctionne pas car le temps de "se fondre" dans le modal ne vous permet pas de vous concentrer sur les entrées. Vous devez créer un délai:

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

})
29
Marcos Furquim

Le code habituel (ci-dessous) ne fonctionne pas pour moi:

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

J'ai trouvé la solution:

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

voir plus ici

12
Éderson T. Szlachta

J'ai eu ce bootstrap ajouté les informations suivantes 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 modaux Bootstrap. Pour obtenir le même effet, utilisez du JavaScript personnalisé:

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

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

6
Amr Elgarhy

C’est le code simple qui fonctionnera le mieux pour tous les popups comportant un champ de saisie avec focalisation.

$(".modal").on('shown.bs.modal', function () {
    $(this).find("input:visible:first").focus();
});
4
Junaid Anwar

Je pense que la réponse la plus correcte, en supposant l'utilisation de jQuery, est une consolidation des aspects de toutes les réponses de cette page, plus l'utilisation de l'événement que Bootstrap transmet:

$(document).on('shown.bs.modal', function(e) {
  $('input:visible:enabled:first', e.target).focus();
});

Il serait également utile de changer $(document) en $('.modal') ou d’ajouter une classe au modal signalant que cette focalisation devrait se produire, comme $('.modal.focus-on-first-input')

3
Phil Hodgson

essayez ce code, il pourrait fonctionner pour vous

$(this).find('input:text')[0].focus();
3
Jitesh Tukadiya

La première étape consiste à définir votre attribut autofocus lors de la saisie du formulaire.

<input name="full_name" autofocus/>

Et vous devez ensuite ajouter une déclaration pour définir la mise au point automatique de votre entrée après l'affichage de votre modal.
Essayez le code suivant: 

$(document).on('ready', function(){
    // Set modal form input to autofocus when autofocus attribute is set
    $('.modal').on('shown.bs.modal', function () {
        $(this).find($.attr('autofocus')).focus();
    });
});
0
Fendi Septiawan

si vous recherchez un extrait qui fonctionnerait pour tous vos modaux et recherchiez automatiquement le premier texte saisi dans celui qui a été ouvert, vous devez utiliser ceci:

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

Si votre modal est chargé en utilisant ajax, utilisez ceci à la place:

$(document).on('shown.bs.modal', '.modal', function() {
    $(this).find('input:visible:first').focus();
});
0
Hassan ALAMI

Si vous voulez simplement mettre au point tout modal qui était ouvert, vous pouvez insérer dans les patterns ou les fonctions lib cet extrait qui se concentrera sur la première entrée:

$('.modal').on('shown.bs.modal', function () {
  $(this).find('input:first').focus();
})
0
Gabriel Rodrigues