it-swarm.com.de

Wie wird der Fokus für ein bestimmtes Feld in einem Bootstrap-Modal festgelegt, sobald es angezeigt wird

Ich habe ein paar Fragen zu Bootstrap-Modalen gesehen, aber nicht genau so, also gehe ich weiter. 

Ich habe einen Modal, den ich Onclick so anrufe ... 

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

Das funktioniert gut, aber wenn ich die Modalität zeige, möchte ich mich auf das erste Eingabeelement konzentrieren ... Im ersten Fall hat das erste Eingabeelement eine ID von #photo_name. 

Also habe ich es versucht

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

Dies war jedoch ohne Erfolg. Schließlich habe ich versucht, an das Show-Event zu binden, aber die Eingabe wird nicht fokussiert. Zum Schluss, nur zum Testen, da ich einen Verdacht hatte, dass es sich um die js-Ladereihenfolge handelt, habe ich einen setTimeout eingestellt, nur um zu sehen, ob ich eine Sekunde verzögere. Aber diese Methode ist offensichtlich Mist. Gibt es eine Möglichkeit, den gleichen Effekt wie unten zu erzielen, ohne setTimeout zu verwenden?

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

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 shown.bs.modal verwendet werden:

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

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

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

oder setzen Sie den Fokus auf die erste sichtbare Eingabe wie folgt:

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

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

76
David Beck

Ich verwende dies in meinem Layout, um alle Modalen aufzunehmen und mich auf die erste Eingabe zu konzentrieren 

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

Ich hatte das gleiche Problem mit Bootstrap 3, konzentriere mich, 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!

9
Alejandro Fiore

Ich hatte ein Problem, das Ereignis "shown.bs.modal" abzufangen. 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', ->
8
Michal Macejko

Es hat den Anschein, dass die modale Animation aktiviert ist (fade in der Klasse des Dialogfelds). Nach dem Aufruf von .modal('show') ist das Dialogfeld nicht sofort sichtbar, sodass der Fokus jetzt nicht angezeigt werden kann.

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

  1. Entfernen Sie fade aus der Klasse, sodass der Dialog nach dem Aufruf von .modal('show') sofort sichtbar ist. Sie können http://codebins.com/bin/4ldqp7x/4 als Demo sehen. (Sorry @keyur, ich habe versehentlich bearbeitet und als neue Version Ihres Beispiels gespeichert.)
  2. Rufen Sie focus() im shown-Ereignis auf, wie es von @keyur geschrieben wurde.
6
SAPikachu

Ich habe eine dynamische Methode entwickelt, um jedes Ereignis automatisch aufzurufen. Es ist perfekt, um ein Feld zu fokussieren, da es das Ereignis nur einmal anruft und es nach dem Gebrauch 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 lediglich modalEvents() in document ready aufrufen.

Benutzen:

$('#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 um Ereignisse zu kümmern.

4
Danilo Colasso

Ich hatte das gleiche Problem mit dem Bootstrap 3 und löste es so:

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

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

Bootstrap hat ein geladenes Ereignis hinzugefügt.

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

erfassen Sie das Ereignis 'loaded.bs.modal' auf dem Modal

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

Bootstrap modale Showveranstaltung

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

})

0
AdminDev826