wake-up-neo.com

Modulares Eingabefeld für Twitter-Bootstraps

Ich habe folgende modale Form vom Beispiel:

<!-- Button to trigger modal -->
<a href="#myModal" role="button" class="btn" data-toggle="modal">Launch demo modal</a>

<!-- Modal -->
<div id="myModal" class="modal hide fade" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true">
  <div class="modal-header">
    <button type="button" class="close" data-dismiss="modal" aria-hidden="true">×</button>
    <h3 id="myModalLabel">Modal header</h3>
  </div>
  <div class="modal-body">
    Enter something: <input type="text" id="myInput">
  </div>
  <div class="modal-footer">
    <button class="btn" data-dismiss="modal" aria-hidden="true">Close</button>
    <button class="btn btn-primary">Save changes</button>
  </div>
</div>

Ich möchte, dass mein Eingabefeld nach der Anzeige von Modal fokussiert wird.
Ich habe sowohl den Autofokus als auch den Einstellfokus auf $('modal').shown() event versucht. Es konzentriert sich irgendwie auf das Feld (ich habe ein anderes Ereignis, bei dem die Beschriftung angezeigt wird, wenn das Feld fokussiert ist), aber tatsächlich ist das Feld nicht fokussiert, und ich muss auf TAB drücken, um es erneut zu fokussieren. Ich habe auch so etwas ausprobiert:

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

und das autofocus:"autofocus"-Attribut für mein Feld . Es gab den gleichen Effekt.
Alles, was ich ausprobiert habe, wenn Modal nur ein gewöhnliches div ist, wird der Fokus auf das Laden der Seite gelegt. Aber wenn Modal per Button ausgelöst wird - funktioniert nichts (sicher verändere ich auch die Logik, wenn Modal nur ein gewöhnliches div ist, kann ich es beim Laden fokussieren, wenn ich per Button auslöst, berücksichtige ich es und versuche es entsprechend zu lösen). 

Ich möchte nur, dass das Feld nach dem Laden von Modal fokussiert wird, so dass der Cursor blinkt und der Benutzer mit der Eingabe beginnen kann. 

Das einzige, was funktioniert hat, ist das Ändern von bootstrap.js selbst. Ich habe $("#myInput").focus() irgendwo in den modalen Abschnitt von bootstrap.js gestellt, aber ich habe vergessen, wo es war, und zweitens - ich denke, es ist nicht gut, die API von bootstrap.js zu ändern. Es muss einfacher sein und elegantere Lösung. Rat mir bitte, danke xD

UPDATE:
Zunächst einmal vielen Dank für Ihre Hilfe! Dank Ihnen habe ich herausgefunden, dass dieses Problem das Rails-Problem ist. 

Folgendes habe ich getan:
1). Rails generate controller home index
2). app/views/home/index.html und app/assets/javascript/something.js sind wie in diesem jsFiddle, bereitgestellt von robertklep: http: // jsfiddle.net/JCaFp/
4). jquery-1.9.1.js und bootstrap.js sind in app/assets/javascript / (beide sind frisch von der Website, nichts hat sich geändert)
5). app/views/layouts/application.html.erb - Ich denke, diese Datei ist der Schlüssel unserer Lösung: 

<!DOCTYPE html>
<html>
<head>
  <title>Udc</title>
  <%= stylesheet_link_tag    "application", :media => "all" %>
  <%= javascript_include_tag "application" %>
  <%= csrf_meta_tags %>
</head>
<body>

<%= yield %>

</body>
</html>

Funktioniert immer noch nicht Alle js-Dateien werden eingeschlossen, aber wenn ich mein Modal im Browser öffne, wird die Eingabe für einen Moment fokussiert und wieder unscharf. 

Ich habe auch folgendes versucht:

  <%= javascript_include_tag "jquery" %>
  <%= javascript_include_tag "bootstrap" %>
  <%= javascript_include_tag "somehow" %>

Immer noch dasselbe Zeug.
Vorschläge? :) 

UPDATE: 

Ich habe es gelöst!

Nachdem Sie meinen somehow.js in geändert haben 

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

und application.html.erb-Stylesheet an: 

  <%= javascript_include_tag "jquery" %>
  <%= javascript_include_tag "bootstrap" %>
  <%= javascript_include_tag "somehow" %>

es funktioniert wie erwartet. Danke noch einmal!

53
konnigun

Ich denke, dass der Ereignisname shown in Bootstrap 3 geändert wurde, wie in this post erläutert.

Wie @MrDBA Notizen, in Bootstrap 3 Der Ereignisname lautet hat in .__ geändert. shown.bs.modal.

Also für Bootstrap 3 verwenden:

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

Für eine allgemeine Lösung, die keinen spezifischen Code für jedes Dialogfeld erfordert, können Sie Folgendes verwenden:

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

Versuchen Sie, tabindex="-1" zu entfernen, und es funktioniert Nizza.

Also das ändern:

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

Zu diesem:

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

Das Ändern von $(this).find("[autofocus]:first").focus(); in $(this).find("#myInput").focus(); hat es für mich zum Laufen gebracht. Wenn Sie die Bootstrap-API geändert haben und diese Änderung rückgängig machen möchten, können Sie die Datei jederzeit erneut herunterladen und ersetzen.

7
Austin Cummings

Ich habe tabindex = "- 1" entfernt und es funktioniert so schön.

Mein HTML-Code vor Änderungen:

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

Mein HTML-Code nach Änderungen:

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

Mein Eingabecode:

<input id="tblModalNombreConductor" type="text" maxlength="50" placeholder="Ej: Armando Casas" autofocus/>

Ich habe keine Konfigurationen in meinem Javascript-Code.

6
Richard Rebeco

Wenn Sie Probleme mit "shown.bs.modal" haben, setzen Sie einfach ein Timeout.

setTimeout(function() {
$('#myInput').focus();
}, 500);
6
hacklover

Ich finde die aktualisierte Antwort ziemlich klug. Hier ist ein anderer Weg, um es zu lösen.

Die js-Datei von Bootstrap 3.2 enthält ein Skript zum Verwalten des Fokus während und nach dem Fade-Übergang des Modals. Dies wirkt sich negativ auf jQuery, Javascript oder Rails + HTML5 aus, die sich auf ein Formularfeld in der Modal-Bootstrap-Ebene konzentrieren, nachdem Sie die Modalität geladen haben. 

Um die Fähigkeit von Bootstrap zu entfernen, Ihren Fokus zu überschreiben, kommentieren Sie diese Zeile im Bereich Modal-Skript aus:

transition ?
    that.$element.find('.modal-dialog') // wait for modal to slide in
      .one($.support.transition.end, function () {
        // that.$element.focus().trigger(e)
        // the line above is stealing your focus after modal loads!
      })
      .emulateTransitionEnd(300) :
    that.$element.focus().trigger(e) 

Jetzt sollte Ihr Feld in jeder modalen Form fokussiert sein können. 

3
Deborah

Sie können Folgendes tun: 

<%= f.text_field :first_name, class: "form-control", placeholder: "Enter first name", autofocus: true%>

fügen Sie einfach folgendes hinzu: Autofokus: wahr

1
Raz

Sie können es auch versuchen

$('#the-modal').on('shown.bs.modal', function(e) {
    $('#the-input').focus();
});
0
ctf0