web-dev-qa-db-de.com

Autofokus-Eingabe in Twitter-Bootstrap-Modal

Ich habe ein solches Problem - ich muss ein Element innerhalb des Twitter-Bootstrap-Modals (nachdem es angezeigt wird) automatisch fokussieren. Der knifflige Teil ist hier - der Inhalt dieses Modals wird mit 'data-remote' (jQuery.load-Methode) aus einer separaten HTML-Datei geladen

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

funktioniert nur wenn modal zuvor geladen wurde. 
Die Frage ist, wie der Autofokus beim ersten Mal modal geladen werden kann.

46
Shtirlits

Ich verwende Bootstrap 3.0 (hoffentlich funktioniert das auch mit 3.1).

Wir mussten tabindex="-1" verwenden, da damit die ESC-Taste das Modal schließen kann.

So konnte ich dieses Problem beheben mit:

// Every time a modal is shown, if it has an autofocus element, focus on it.
$('.modal').on('shown.bs.modal', function() {
  $(this).find('[autofocus]').focus();
});
92
nc.

versuchen Sie, tabindex = "- 1" zu entfernen, und es funktioniert einwandfrei.

<div class="modal fade" id="modalID" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true">

<div class="modal fade" id="modalID" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true">

Hoffe das hilft!

25
nooweel

Ich konnte die Lösung von @nc nicht für meine App nutzen. Es wurden keine Modals angezeigt, die später hinzugefügt wurden. Das hat aber für mich funktioniert

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

Wie Frank Fang ausführt, sollten Sie dies verwenden, wenn Sie eine neuere Version von Bootstrap verwenden, die nicht das HTML-Attribut autofocus verwendet.

$('#myModal').on('shown.bs.modal', function () {
  // get the locator for an input in your modal. Here I'm focusing on
  // the element with the id of myInput
  $('#myInput').focus()
})
14
Paul Oliver

Die obigen Antworten sind für die neuesten Bootstrap-Versionen etwas veraltet.

Unten ist ein Auszug aus: http://getbootstrap.com/javascript/#modals

Da HTML5 seine Semantik definiert, wird das autofocus-HTML-Attribut hat keine Auswirkung in Bootstrap-Modalen. Um den gleichen Effekt zu erzielen, verwenden Sie einige benutzerdefinierte JavaScript:

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

Sie haben eine Eingabe mit dem Attribut autofocus, das bei der Anzeige des Bootstrap-Modals fokussiert werden soll.

Ist Ihr modales Markup verfügbar, wenn JavaScript geladen ist?

Registrieren eines Event-Handlers für alle .modal-Elemente für das shown.bs.modal-Ereignis

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

Wird Ihr modales Markup dynamisch generiert?

Registrieren Sie einen Event-Handler für das gesamte Dokument für das shown.bs.modal-Ereignis.

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