Automatisch das erste Eingabefeld aktivieren
0 
Felix Riesterer
0 
Gunnar Bittersmann
0 Matti Mäkitalo
0 
suit
0 Matti Mäkitalo
0 suit
Automatisch das erste Eingabefeld aktivieren
Ich möchte gern beim laden einer Seite den Cursor automatisch in das erste Eingabefeld setzen lassen, damit der Benutzer sofort mit der Eingabe beginnen kann.
Habe dazu folgenden Befehl in das Body- Element eingebunden:
onLoad="document.getElementsByTagName('input')[0].focus()"
Das Funktioniert auch, nur erhalte ich im Hintergrund eine Fehlermeldung: "document.getElementsByTagName('input')[0] is undefined" (null oder kein Element).
Daher würde ich stattdessen gerne den Focus auf das Eingabeelement mit tabindex="1" setzen lassen, hab aber keine Ahnung wie das korrekt angesprochen wird?
-
Lieber LastBoyScout,
onLoad="document.getElementsByTagName('input')[0].focus()"wenn es kein passendes Ergebnis gibt (die getElementsByTagName-Methode liefert eine leere Liste), dann führt diese Anweisung natürlich zu einem Fehler.
Ich habe beobachtet, dass man die focus-Methode vor allem im IE nicht immer erfolgreich anwenden kann, sodass sich ihre Verwendung in einer try-catch-Kombination empfiehlt. Das kannst Du aber nicht sinnvoll im onload-Attribut notieren, sondern brauchst dazu einen "echten" JavaScript-Bereich - vorzugsweise im <head> Deines Dokuments.
Um nun im <head> sinnvoll Deine Aufgabenstellung umsetzen zu können, benötigst Du nicht mehr das onload-Attribut im öffnenden <body>-Tag, sondern eine bessere Lösung.
Wenn Du schon im <head> Dein JavaScript notierst, dann kannst Du diese Funktion auch gleich ausführlicher bauen:
function autoFocusFirstInput () { var inputs = document.getElementsByTagName("input"); if (inputs[0]) { // OK passendes Element gefunden! try { inputs[0].focus(); } catch (e) { console.log("Fehler beim Fokussieren:\n"+e); } } }Liebe Grüße,
Felix Riesterer.
--
ie:% br:> fl:| va:) ls:[ fo:) rl:| n4:? de:> ss:| ch:? js:) mo:} zu:)-
Hi,
warum sollte das im <head> sein und nicht lieber vorm schließenden </body>?
~dave
-
Danke für die Infos.
Aber wie würde ich ein Formularfeld mit
tabindex="1"ansprechen? und erhalte ich auch da einen Fehler wenn es keines gibt?Wenn ich die HTML5 -eigenschaft
autofocusverwende, muss dann das gesamte Dokument als HTML5 deklariert sein? oder kann ich es auch einfach in ein HTML4.01 einbinden, da es nur auf die Browser -unterstützung ankommt?-
oder kann ich es auch einfach in ein HTML4.01 einbinden, da es nur auf die Browser -unterstützung ankommt?
Wird ziemlich sicher auch funktionieren, du hast dann aber kein gültiges HTML-4.01-Dokument mehr
-
oder kann ich es auch einfach in ein HTML4.01 einbinden, da es nur auf die Browser -unterstützung ankommt?
Wird ziemlich sicher auch funktionieren, du hast dann aber kein gültiges HTML-4.01-Dokument mehr
Jedoch wird
autofucuswohl auch beim FF erst ab Version 4 unterstützt.Bez. mit Javascript den Focus in ein beliebiges Formularfeld mit
tabindex="1"zu setzen hat wohl keiner eine Idee???-
@@LastBoyScout:
nuqneH
Jedoch wird
autofucuswohl auch beim FF erst ab Version 4 unterstützt.Was für Browser zu tun ist, die @autofocus noch nicht unterstützen, hatte ich bereits gesagt. Das Gute daran ist, dass Browser, die @autofocus noch schon unterstützen, nicht nochmal das DOM durchsuchen müssen, was Zeit spart und das UI schneller macht. Deshalb ist das die zu bevorzugende Lösung.
Bez. mit Javascript den Focus in ein beliebiges Formularfeld mit
tabindex="1"zu setzen hat wohl keiner eine Idee???Welche andere Idee als das DOM nach dem Element zu durchsuchen, welches ein @tabindex-Attribut mit dem Wert "1" hat, wolltest du hören? Außer eben die Idee, das DOM nach dem Element zu durchsuchen, welches ein @autofocus-Attribut hat, und das nur dann, wenn nötig.
Qapla'
--
Gut sein ist edel. Andere lehren, gut zu sein, ist noch edler. Und einfacher.
(Mark Twain) -
Jedoch wird
autofucuswohl auch beim FF erst ab Version 4 unterstützt.fucus? Fucus!
-
-
-
-
-
-
@@LastBoyScout:
nuqneH
Ich möchte gern beim laden einer Seite den Cursor automatisch in das erste Eingabefeld setzen lassen, damit der Benutzer sofort mit der Eingabe beginnen kann.
HTML5 bietet dazu das @autofocus-Attribut, was auch schon von einigen Browsern unterstützt wird.
Ob es unterstützt wird, lässt sich abfragen. Per JavaScript muss man das DOM nur in den Browsern, die @autofocus nicht unterstützen, nach dem zu fokussierendem Element durchsuchen.
Ich würde per Script den Fokus auch nicht auf das erste Eingabefeld legen, sondern auf dasjenige, welches ein @autofocus-Attribut hat. So ist die Lösung flexibler einsetzbar.
Oder halt gleich Modernizr verwenden.
Qapla'
--
Gut sein ist edel. Andere lehren, gut zu sein, ist noch edler. Und einfacher.
(Mark Twain)-
Hi,
Ich würde per Script den Fokus auch nicht auf das erste Eingabefeld legen, sondern auf dasjenige, welches ein @autofocus-Attribut hat. So ist die Lösung flexibler einsetzbar.
ACK.
Mit jQuery habe ich das ganze mal so geschrieben:
$(document).ready(function() { $('*[autofocus]').focus(); });setzt den Fokus auf das (letzte) Element, welches das Attrbut "autofocus" besitzt.
Bis die Tage,
Matti-
Mit jQuery habe ich das ganze mal so geschrieben:
$(document).ready(function() {
$('*[autofocus]').focus();
});> > setzt den Fokus auf das (letzte) Element, welches das Attrbut "autofocus" besitzt. Nein, es setzt den focus der Reihe nach auf alle Elemente hintereinander und notwendigerweise bleibt dann das letzte fokussiert.-
Hi,
Mit jQuery habe ich das ganze mal so geschrieben:
$(document).ready(function() {
$('*[autofocus]').focus();
});> > > > setzt den Fokus auf das (letzte) Element, welches das Attrbut "autofocus" besitzt. > > Nein, es setzt den focus der Reihe nach auf alle Elemente hintereinander und notwendigerweise bleibt dann das letzte fokussiert. Da hast du Recht, den (Neben-) Effekt habe ich unterschlagen, da man i.d.R. nur auf ein Element autofocus legt. Ist aber eine nicht mal theoretische Frage, da laut [HTML5-Draft](http://www.w3.org/TR/html5/association-of-controls-and-forms.html#autofocusing-a-form-control) es sowieso nur ein Element innerhalb eines Dokuments geben darf, welches ein autofocus Attribut hat. "There must not be more than one element in the document with the autofocus attribute specified." Wenn du es aber gerne "korrekt" hast: ~~~javascript $(document).ready(function() { $('*[autofocus]:first').focus(); });oder mit einem ähnlichen Selektor, welcher '*[autofocus]' eindeutig macht, auch wenn gegen HTML5-Regeln verstoßen wird.
Bis die Tage,
Matti-
"There must not be more than one element in the document with the autofocus attribute specified."
oder mit einem ähnlichen Selektor, welcher '*[autofocus]' eindeutig macht, auch wenn gegen HTML5-Regeln verstoßen wird.
Da gibts sicher eine Regel für den HTML5-Parser, was er tun muss, wenn es mehrere Elemente mit autofocus gibt - diese wäre interessant, wenn es darum geht, dass die Funktionalität nachgebaut wird.
-
Hi,
"There must not be more than one element in the document with the autofocus attribute specified."
oder mit einem ähnlichen Selektor, welcher '*[autofocus]' eindeutig macht, auch wenn gegen HTML5-Regeln verstoßen wird.
Da gibts sicher eine Regel für den HTML5-Parser, was er tun muss, wenn es mehrere Elemente mit autofocus gibt - diese wäre interessant, wenn es darum geht, dass die Funktionalität nachgebaut wird.
Wenn ich in angegebenem Link nachlese, was der Parser tun soll, wenn ein autofocus-Element erscheint, klingt das danach, als ob ebenfalls nacheinander alle Elemente mit dem Attributen fokussiert werden.
Dabei gehe ich von der Annahme aus, dass das DOM "von oben nach unten" geparst wird und die Regeln, welche im Draft hinterlegt sind, sofort beim parsen des Elements evaluiert werden. Diese würde bedeuten, dass sie nacheinander(!) bei allen Elementen angewandt werden und dementsprechend auch fokussiert wird.Den JS-Schnippsel, den ich angegeben habe, entspricht den Regeln in etwa, zumindest sollte er nach meinem Verständnis das richtige Ergebnis bringen, wenn das letzte gefundene Element fokussierbar ist (da ich nicht genau weiß, was jquery mit dem Fokus macht, wenn das letzte Element diese Eigenschaft nicht hat).
Bis die Tage,
Matti
-
-
-
-
-