So setzen Sie den Fokus auf die erste Texteingabe in einem Bootstrap-Modal nach der Abbildung

Ich lade ein dynamisches Bootstrap-Modal und es enthält nur wenige Texteingaben. Das Problem, mit dem ich konfrontiert bin, ist, dass der Cursor sich auf die erste Eingabe in diesem Modal konzentrieren soll, und dies geschieht nicht standardmäßig.
Also habe ich diesen Code geschrieben, um es zu tun:

$('#modalContainer').on('show', function () {
   $('input:text:visible:first').focus();
});

Aber jetzt konzentriert es sich für einen Moment auf die Eingabe und verschwindet dann automatisch. Warum passiert das und wie kann man es lösen?

@scumah hat die Antwort für Sie: Twitter Bootstrap - Konzentrieren Sie sich auf den Textbereich innerhalb eines Modals beim Klicken

Für Bootstrap 2

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

Update: Für Bootstrap 3

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

========== Update ======

Als Antwort auf eine Frage können Sie diese Option mit mehreren Modalen auf derselben Seite verwenden, wenn Sie unterschiedliche Datenziele angeben, Ihre Modal-IDs entsprechend umbenennen und die IDs der Formulareingabefelder aktualisieren und schließlich Ihre JS entsprechend diesen neuen aktualisieren IDs:
siehe 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();
})

Ich habe den besten Weg gefunden, dies ohne jQuery zu tun.

<input value="" autofocus>

funktioniert perfekt.

Dies ist ein HTML5-Attribut. Unterstützt von allen gängigen Browsern.
https://developer.mozilla.org/en-US/docs/Web/HTML/Element/Input

Die Antwort von David Taiaroa ist richtig, funktioniert aber nicht, da Sie sich bei der Zeit zum "Einblenden" des Modals nicht auf die Eingabe konzentrieren können. Sie müssen eine Verzögerung erstellen:

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

})

Der übliche Code (unten) funktioniert bei mir nicht:

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

Ich habe die Lösung gefunden :

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

Sehen Sie hier mehr

Ich habe diesen Bootstrap die folgenden Informationen auf ihrer Seite hinzugefügt:

Aufgrund der Definition der Semantik von HTML5 hat das Autofokus-HTML-Attribut in Bootstrap-Modalen keine Auswirkung. Verwenden Sie benutzerdefiniertes JavaScript, um den gleichen Effekt zu erzielen:

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

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

Dies ist der einfache Code, der am besten für alle Popups geeignet ist, die ein Eingabefeld mit Fokussierung haben

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

Ich denke, die richtigste Antwort unter der Annahme der Verwendung von jQuery ist eine Konsolidierung von Aspekten aller Antworten auf dieser Seite sowie die Verwendung des Ereignisses, das Bootstrap übergibt:

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

Es wäre auch zu ändern arbeiten $(document)zu $('.modal')oder eine Klasse zu dem modalen hinzufügen , dass Signale , dass diese Konzentration auftreten sollen, wie$('.modal.focus-on-first-input')

Versuchen Sie diesen Code, es könnte für Sie funktionieren

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

Im ersten Schritt müssen Sie Ihr autofocusAttribut für die Formulareingabe festlegen .

<input name="full_name" autofocus/>

Und dann müssen Sie eine Deklaration hinzufügen, um den Autofokus Ihrer Eingabe einzustellen, nachdem Ihr Modal angezeigt wird.
Versuchen Sie diesen 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();
    });
});

Wenn Sie nur ein offenes Modal automatisch fokussieren möchten, können Sie Muster oder lib-Funktionen in dieses Snippet einfügen, das sich auf die erste Eingabe konzentriert:

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

Wenn Sie nach einem Snippet suchen, das für alle Ihre Modalitäten geeignet ist, und automatisch nach dem ersten Eingabetext im geöffneten suchen, sollten Sie Folgendes verwenden:

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

Wenn Ihr Modal mit Ajax geladen wird, verwenden Sie stattdessen Folgendes:

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

Dies ist die allgemeinste Lösung

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

• Funktioniert mit Modals, die nach dem Laden der Seite zu DOM hinzugefügt wurden
• funktioniert mit Eingabe, Textbereich, Auswahl und nicht mit Schaltfläche
• ommits versteckt, deaktiviert, schreibgeschützt
• funktioniert mit ausgeblendeten Modalen, setInterval ist nicht erforderlich

Versuchen Sie , die tabIndex-Eigenschaft des Modals zu entfernen , wenn Ihre Eingabe / Ihr Textfeld geöffnet ist. Stellen Sie es wieder auf das ein, was es war , wenn Sie die Eingabe / das Textfeld schließen. Dies würde das Problem unabhängig von der Bootstrap-Version beheben , ohne den Benutzererlebnisfluss zu beeinträchtigen .

Laut Bootstrap 4-Dokumenten:

Aufgrund der Definition der Semantik von HTML5 hat das Autofokus-HTML-Attribut in Bootstrap-Modalen keine Auswirkung. Verwenden Sie benutzerdefiniertes JavaScript, um den gleichen Effekt zu erzielen.

Z.B:

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

Link .

Verwenden Sie den Autofokus, um nach dem richtigen Formularelement zu suchen:

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

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

• Es ist "#button", der die modale Form aufruft,

• "#mymodal" ist die modale Form,

• "#myinput" ist die Eingabe, auf die Sie sich konzentrieren möchten