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

Je charge un modal bootstrap dynamique et il contient peu d'entrées de texte. Le problème auquel je suis confronté est que je veux que le curseur se concentre sur la première entrée de ce modal, et cela ne se produit pas par défaut.
J'ai donc é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 disparaît automatiquement, pourquoi cela se produit et comment résoudre?

@scumah a la réponse pour vous: Bootstrap Twitter - Focus sur textarea à l'intérieur d'un modal sur 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 différentes cibles de données, renommez vos identifiants modaux pour qu'ils correspondent et mettez à jour les identifiants des champs de saisie du formulaire, et enfin mettez à jour votre JS pour qu'il corresponde à ces nouveaux 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();
})

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

<input value="" autofocus>

fonctionne parfaitement.

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

La réponse de David Taiaroa est correcte, mais ne fonctionne pas parce que le temps de "fondre" le modal ne vous permet pas de vous concentrer sur l'entrée. Vous devez créer un retard:

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

})

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

J'ai eu ce bootstrap ajouté les informations suivantes sur leur page:

En raison de la façon 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

C'est le code simple qui fonctionnera le mieux pour vous sur tous les popups qui ont un champ de saisie avec le focus

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

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 passe:

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

Il travaillerait aussi changer $(document)à $('.modal')ou pour ajouter une classe au modal que les signaux que cette focalisation devrait se produire, comme$('.modal.focus-on-first-input')

essayez ce code, cela pourrait fonctionner pour vous

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

Première étape, vous devez définir votre autofocusattribut lors de la saisie du formulaire.

<input name="full_name" autofocus/>

Et puis vous devez ajouter une déclaration pour définir l'autofocus de votre entrée après l'affichage de votre modal.
Essayez ce code:

$(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();
    });
});

Si vous voulez simplement mettre au point automatiquement n'importe quel modal qui était ouvert, vous pouvez mettre dans vos modèles ou fonctions lib cet extrait de code qui se concentrera sur la première entrée:

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

si vous recherchez un extrait de code qui fonctionnerait pour tous vos modaux et recherchez automatiquement le premier texte d'entrée dans celui 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 plutôt ceci:

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

c'est la solution la plus générale

$('body').on('shown.bs.modal', '.modal', function () {
    $(this).find(":input:not(:button):visible:enabled:not([readonly]):first").focus();
});

• fonctionne avec les modaux ajoutés au DOM après le chargement de la page
• fonctionne avec l'entrée, la zone de texte, sélectionnez et non avec le bouton
• ommits masqués, désactivés, en lecture seule
• fonctionne avec les modaux fanés, pas besoin de setInterval

Essayez de supprimer la propriété tabIndex du modal , lorsque votre entrée / zone de texte est ouverte. Remettez-le à ce qu'il était , lorsque vous fermez l'entrée / la zone de texte. Cela résoudrait le problème quelle que soit la version de bootstrap , et sans compromettre le flux d'expérience utilisateur .

Selon la documentation de Bootstrap 4:

En raison de la façon 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é.

Par exemple:

$('#idOfMyModal').on('shown.bs.modal', function () {
    $('input:first').trigger('focus')
});

Lien .

Utilisez l'autofocus pour rechercher le bon élément de formulaire:

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

$(document).ready(function() {
  $("#button").click(function() {
    $('#mymodal').on('shown.bs.modal', function() {
      $('#myinput').focus();
    })
  });
});

• C'est "#button" qui appelle la forme modale,

• "#mymodal" est la forme modale,

• "#myinput" est l'entrée sur laquelle vous souhaitez vous concentrer