So legen Sie den Fokus für ein bestimmtes Feld in einem Bootstrap-Modal fest, sobald es angezeigt wird

Ich habe ein paar Fragen in Bezug auf Bootstrap-Modalitäten gesehen, aber keine genau so, also werde ich weitermachen.

Ich habe ein Modal, das ich onclick so nenne ...

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

Dies funktioniert gut, aber wenn ich das Modal zeige, möchte ich mich auf das erste Eingabeelement konzentrieren ... In diesem Fall hat das erste Eingabeelement die ID #photo_name.

Also habe ich es versucht

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

Aber das war ohne Erfolg. Zuletzt habe ich versucht, mich an das 'show'-Ereignis zu binden, aber trotzdem wird die Eingabe nicht fokussiert. Zuletzt nur zum Testen, da ich den Verdacht hatte, dass es sich um die js-Ladereihenfolge handelt, habe ich ein setTimeout eingegeben, um zu sehen, ob ich eine Sekunde verzögere, ob der Fokus funktioniert, und ja, es funktioniert! Aber diese Methode ist offensichtlich Mist. Gibt es eine Möglichkeit, den gleichen Effekt wie unten zu erzielen, ohne ein setTimeout zu verwenden?

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

Versuche dies

Hier ist die alte DEMO :

EDIT: (Hier ist eine funktionierende DEMO mit Bootstrap 3 und jQuery 1.8.3)

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

Zum Starten von Bootstrap 3 muss das Ereignis "found.bs.modal" verwendet werden:

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

Ich wollte nur sagen, dass Bootstrap 3 dies etwas anders handhabt. Der Ereignisname lautet "selected.bs.modal".

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

oder konzentrieren Sie sich auf die erste sichtbare Eingabe wie folgt:

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

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

Ich verwende dies in meinem Layout, um alle Modalitäten zu erfassen und mich auf die erste Eingabe zu konzentrieren

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

Ich hatte das gleiche Problem mit Bootstrap 3, Fokus, wenn ich auf den Link klicke, aber nicht, wenn das Ereignis mit Javascript ausgelöst wird. Die Lösung:

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

Wahrscheinlich geht es um die Animation!

Ich hatte ein Problem beim Abfangen des Ereignisses "gezeigt.bs.modal". Und dies ist meine Lösung, die perfekt funktioniert.

Stattdessen einfach auf ():

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

Verwenden Sie on () mit delegiertem Element:

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

Dies liegt anscheinend daran, dass die modale Animation aktiviert ist ( fadein der Klasse des Dialogfelds). Nach dem Aufruf .modal('show')ist das Dialogfeld nicht sofort sichtbar, sodass es zu diesem Zeitpunkt nicht fokussiert werden kann.

Ich kann mir zwei Möglichkeiten vorstellen, um dieses Problem zu lösen:

1. fadeAus der Klasse entfernen , damit der Dialog sofort nach dem Aufruf sichtbar wird .modal('show'). Sie können http://codebins.com/bin/4ldqp7x/4 für die Demo sehen. (Sorry @keyur, ich habe fälschlicherweise bearbeitet und als neue Version Ihres Beispiels gespeichert)
2. Rufen Sie focus()ein shownEreignis an, wie es @keyur geschrieben hat.

Ich habe eine dynamische Methode erstellt, um jedes Ereignis automatisch aufzurufen. Es ist perfekt, um ein Feld zu fokussieren, da es das Ereignis nur einmal aufruft und es nach der Verwendung entfernt.

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');
            }
        });
    });
}

Sie müssen nur das modalEvents()Dokument bereit aufrufen .

Verwenden:

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

Sie können also dasselbe Modal verwenden, um das zu laden, was Sie möchten, ohne sich jedes Mal Gedanken über das Entfernen von Ereignissen machen zu müssen.

Ich hatte das gleiche Problem mit dem Bootstrap 3 und löste es folgendermaßen:

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

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

Bootstrap hat ein geladenes Ereignis hinzugefügt.

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

Erfassen Sie das Ereignis 'load.bs.modal' auf dem Modal

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

Bootstrap Modal Show Event

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

})

Eine etwas sauberere und modularere Lösung könnte sein:

$(document).ready(function(){
    $('.modal').success(function() { 
        $('input:text:visible:first').focus();
    });  
});

Oder verwenden Sie stattdessen Ihre ID als Beispiel:

$(document).ready(function(){
    $('#modal-content').modal('show').success(function() {
        $('input:text:visible:first').focus();
    });  
});

Hoffentlich hilft das..