Fokus auf Sprungmarke setzen

T

TinniTuss

Erfahrenes Mitglied
Hallihallo

Ich möchte, dass eine Sprungmarke auch den Fokus bekommt, wenn ich per Link dorthin springe. Auf diese Weise angesprungene Anker sollen entsprechend anders formatiert werden. Das funktioniert per Mausklick wunderbar, mit der Tabulatortaste auch, aber nicht per Link. Seh' ich hier evtl. bloß den Wald vor lauter Bäumen nicht?
Ein Beispiel zum Zeigen was ich meine steht hier.

http://www.hhoffmann.de/focus-auf-sprungmarke.html

(Falls das nur mit JavaScript zu lösen wäre würde ich auch das nehmen!)

Peace
HH.
 
Wenn wir bei meinem Muster bleiben...

Wenn ich auf einen der drei Links klicke (oben) dann sprigt der Browser auch zu der entsprechenden Sprungmarke. Aber die hat dann den Focus nicht!
Den Focus, und die damit verbundene Formatierung erhält die Sprungmarke (Ziel) hier in diesem Beispiel nur, wenn ich sie selber direkt anklicke. Dann, und nur dann übernimmt Sie auch die Formatierung (a.sprung:focus {font-size: 200%})

Ich möchte auf den Link (oben Klicken), der Browser springt zur Sprungmarke UND! erhält ZUSÄTZLICH! den Focus, irgendwie.

Weißt Du evtl. nicht was 'Focus' ist?

HH.


Nachtrag:
Wenn Du Dich per Tabulator-Taste der Reihe nach durch die Sprungmarken hangelst, bekommen alle auch der Reihe nach den Focus (font-size 200%) aber leider nicht beim Klick auf den dazugehörenden Link (oben) - Verstanden? Und genau das Problem möchte ich lösen und bitte deshalb hier um Tipps. - Danke!
 
Zuletzt bearbeitet:
TinniTuss hat gesagt.:
Weißt Du evtl. nicht was 'Focus' ist?

[...]


Nachtrag:
Wenn Du Dich per Tabulator-Taste der Reihe nach durch die Sprungmarken hangelst, bekommen alle auch der Reihe nach den Focus (font-size 200%) aber leider nicht beim Klick auf den dazugehörenden Link (oben) - Verstanden?
Zum Vergrößern anklicken....
Freilich ist "Focus" mir ein Begriff, und genau dort liegt in deinem Vorhaben auch der Pfeffer begraben, weil:

:focus = für Elemente, die den Fokus erhalten, z.B. durch "Durchsteppen" mit der Tabulator-Taste (CSS 2.0)
Zum Vergrößern anklicken....

Pseudoklasse :focus

Wenn ein Element im Fokus ist, sind Tastenfeld- oder andere Texteingaben möglich. Innerhalb eines Dokuments kann der Benutzer zwischen den Elementen, für die ein :focus definiert ist, mit der Tab-Taste springen. Damit ist :focus praktisch die Tastenfeld-Alternative zu :hover.
Zum Vergrößern anklicken....
 
Danke vielmals...

aber ich seh' den praktischen Nutzen nicht. Die Frage lautet nicht, wie formatiere ich ein Element das den Fokus hat, sondern was muß ich erstmal anstellen, damit es den Fokus bekommt. Wenn ich per Link zu einer Sprungmarke gebracht werde, dann hat das Ding immer noch nicht den Focus. OK?

Angenommen ich klicke auf einen Link im Inhaltsverzeichnis um in einem größeren Text an eine ganz bestimmte Stelle zu springen. Damit ich dann an dieser Stelle (für den User) diesen Text (evtl. ein Zitat oder sonstwas) besonders hervorheben kann, muß dieses Element oder die Sprungmarke dorthin auch den 'Fokus' bekommen.

Das was Du zuletzt angeboten hast, macht mein Muster bereits.

Viel Gruß
HH.
 
TinniTuss hat gesagt.:
aber ich seh' den praktischen Nutzen nicht. Die Frage lautet nicht, wie formatiere ich ein Element das den Fokus hat, sondern was muß ich erstmal anstellen, damit es den Fokus bekommt. Wenn ich per Link zu einer Sprungmarke gebracht werde, dann hat das Ding immer noch nicht den Focus. OK?
Zum Vergrößern anklicken....
Und daran lässt sich per "konventionellen HTML-Link" auch nix drehen. OK?

JavaScript ist in diesem Fall dein Freund und Helfer, und schlußendlich deine Argumentation contra meinen erhobenen Einwand von wenig Erfolg gekrönt.

Dein Muster beruht auch nur auf den gegebenen Gesetzmäßigkeiten. Siehe meine beiden Link-Empfehlungen, die dir hier keineswegs einen praktischen Nutzen liefern sollten, sondern lediglich deinen beschriebenen Sachverhalt bekräftigen. Ende der Durchsage. Vorsicht an der Bahnsteigkante.
 
Zuletzt bearbeitet:
Hi,

du könntest mit JavaScript die Links derartig modifizieren, dass sie den Fokus der zugehörigen Sprungmarke setzen. Voraussetzung ist natürlich, dass das Zielelement einen Fokus erhalten kann.

Hierfür werden die Links, die als Sprung-Links dienen sollen mit einer Klasse ausgezeichnet (hier: focus_lnk).
Im onload-Event des Dokuments werden alle Links durchlaufen. Wird die Klasse focus_lnk gefunden, wird der Link mit einem onclick-Handler versehen. Dort wird zeitverzögert der Fokus der zugehörigen Sprungmarke gesetzt.

Beispiel:
Code: 
<html>
<head>
<style type="text/css">
a.sprung:link {font-size: 100%}
a.sprung:visited {font-size: 100%}
a.sprung:hover {font-size: 100%}
a.sprung:active {font-size: 200%}
a.sprung:focus {font-size: 200%}
</style>
<script type="text/javascript">
  <!--
window.onload = function(){
  // Alle Links-Elemente
  var arrA = document.getElementsByTagName("a");
  // Link-Elemente durchlaufen
  for(var i=0; i<arrA.length; i++){
    // Falls der geforderte Klassenname enthalten ist
    if(arrA[i].className.search("focus_lnk") != -1){
      // Click-Handler
      arrA[i].onclick = function(){
        var _this = this;
        // ID aus Sprungmarke extrahieren und Fokus setzen
        window.setTimeout(function(){
          document.getElementById(_this.href.substr(_this.href.lastIndexOf("#")+1)).focus();
        }, 10);
      }
    }
  }
}
 //-->
</script>
</head>
<body>
	<br/><br/>

	<a class="focus_lnk" href="#sprung1"> Sprung1 </a> <br/>
	<a class="focus_lnk" href="#sprung2"> Sprung2 </a> <br/>
	<a class="focus_lnk" href="#sprung3"> Sprung3 </a> <br/>

	<br/><br/>

	<a href="#" name="sprung1" id="sprung1" class="sprung"> Ziel </a>
	<p><b>Sprung 1 </b></p>

	<a href="#" name="sprung2" id="sprung2" class="sprung"> Ziel </a>
	<p><b>Sprung 2 </b></p>

	<a href="#" name="sprung3" id="sprung3" class="sprung"> Ziel </a>
	<p><b>Sprung 3 </b></p>
</body>
</html>
Sollte dir jQuery zur Verfügung stehen (in Anlehnung an deinen Post im JS-Forum), könntest du den JavaScript-Teil verkürzt auch wie folgt schreiben:
Code: 
$(function(){
  $('a.focus_lnk').click(function(evt){
    var _this = this;
    window.setTimeout(function(){
      $('#' + $(_this).attr('href').substr($(_this).attr('href').lastIndexOf('#')+1)).focus();
    }, 10);
  });
});
Ciao
Quaese
 
Hallo Quaese

Genau das isses!
Funktioniert prima, macht genau das, was es soll. Das nehm' ich!
Ich hatte schon befürchtet, ich drücke mich unverständlich aus.

Gestern bekam ich absolut zufällig, ohne danach gesucht zu haben, die folgende CSS3-Lösung.
Auch nicht schlecht, aber leider kann man CSS3 für die nächsten 3 Jahre noch nicht auf jedem Rechner/Browser voraussetzen...

http://webdesignernotebook.com/css/the-css3-target-pseudo-class-and-css-animations/

Danke, vielen Dank!
HH.
 
Um antworten zu können musst du eingeloggt sein.

Neue Beiträge

Zurück