Wir haben eine HTML5-Anwendung ( <!DOCTYPE html> ) mit Twitter Bootstrap und verschiedenen anderen JavaScript-Bibliotheken (einschließlich jQuery) - alle laufen auf ihren aktuellen Versionen.
Die Seite enthält eine Texteingabe mit dem Attribut autofocus .
<input type="text" autofocus="autofocus" />
Die Seite enthält mehr als einen "Bildschirm" mit Inhalten, was bedeutet, dass auf der Seite immer eine vertikale Bildlaufleiste angezeigt wird. Die Texteingabe befindet sich innerhalb der ersten 'Falte' der Seite, ca. 250px vom Anfang der Seite.
In Chrome, Safari und Opera funktioniert die Seite wie erwartet. Wenn die Seite geladen wird, ist das Element auf dem Bildschirm und fokussiert.
Auf FireFox (aktuelle Version - 18.0.1) hat das Element den Fokus, aber die Seite ist auf 1533px gescrollt (bestimmt über window.pageYOffset). Die gleiche Seite mit unterschiedlichen Inhaltslängen scrollt immer zur selben Position, und das Element wird außerhalb des Bildschirms angezeigt.
Es gibt definitiv nur ein Element mit dem Autofokus-Attribut ( $("[autofocus]").length ).
Das Entfernen des Autofokus-Attributs aus dem Element führt nicht dazu, dass die Seite überhaupt blättert (d. h. die Seite bleibt wie erwartet nach oben gescrollt.)
Kann jemand Hilfe oder Einsicht bieten?
Der folgende Test funktioniert ordnungsgemäß:
%Vor% Sie brauchen CSS-Code, um das zu sagen:
%Code%
Dann muss der Texteingabecode wie folgt lauten:
.focusedInput {
border-color: rgba(82,168,236,.8);
outline: 0;
outline: thin dotted ;
-moz-box-shadow: 0 0 8px rgba(82,168,236,.6);
box-shadow: 0 0 8px rgba(82,168,236,.6) !important;
}
Tags und Links firefox twitter-bootstrap autofocus