Ralf: Focus von Links abwenden

Hallo Community,

ich habe folgendes Problem: Ich benutze <a>-Tags als Tabs für eine Webseite. Wenn ich nun darauf klicke wird jedoch kein neues Fenster geladen sondern nur ein Teil der Webseite neu. Leider setzt der Browser (Firefox) immer einen unschönen Focus auf das angeklickte Tab (gepunktete Linie um das Tab).

Diesen Effekt würde ich gerne vermeiden. Ich habe schon versucht mit der focus() Funktion zu arbeitern, leider klappt das jedoch nicht.

Ich würde mich sehr über eine Antwort freuen. MfG, Ralf!

  1. ich habe folgendes Problem: Ich benutze <a>-Tags als Tabs für eine Webseite. Wenn ich nun darauf klicke wird jedoch kein neues Fenster geladen sondern nur ein Teil der Webseite neu. Leider setzt der Browser (Firefox) immer einen unschönen Focus auf das angeklickte Tab (gepunktete Linie um das Tab).

    Diesen Effekt würde ich gerne vermeiden. Ich habe schon versucht mit der focus() Funktion zu arbeitern, leider klappt das jedoch nicht.

    Du willst nicht den focus verhindern, sondern beim Focus outline ausblenden:

    a:focus {outline:none;}

    mfg Beat

    --
    ><o(((°>           ><o(((°>
       <°)))o><                     ><o(((°>o
    Der Valigator leibt diese Fische
    1. Perfekt! Vielen Dank!

      1. @@Ralf:

        nuqneH

        Perfekt!

        Das ist nicht perfekt, sondern grober Unfug: Es macht die Navigation per Tastatur (fast) unmöglich.

        Vielen Dank!

        Nicht dafür. Wirklich nicht.

        Qapla'

        --
        Alle Menschen sind klug. Die einen vorher, die anderen nachher. (John Steinbeck)
    2. @@Beat:

      nuqneH

      Du willst nicht den focus verhindern, sondern beim Focus outline ausblenden:

      Von dir hätte ich erwartet, dass du nicht solchen Schwachsinn von dir gibst.

      So kann(st) man sich (du mich) (ent)täuschen.

      Qapla'

      --
      Alle Menschen sind klug. Die einen vorher, die anderen nachher. (John Steinbeck)
      1. Du willst nicht den focus verhindern, sondern beim Focus outline ausblenden:
        Von dir hätte ich erwartet, dass du nicht solchen Schwachsinn von dir gibst.

        Ja sollte heissen.

        a:active { outline:0; }

        Du darfst mich ja gerne kompetent korrigieren.

        mfg Beat

        --
        ><o(((°>           ><o(((°>
           <°)))o><                     ><o(((°>o
        Der Valigator leibt diese Fische
        1. @@Beat:

          nuqneH

          a:active { outline:0; }

          Das war auch mein erster Gedanke.
          CSS :focus und :active – Tast(en)sinn auf Webseiten
          Better CSS outline suppression

          Allerdings sieht es so aus, dass die 'a' nicht so lange aktiv sind, wie es der OP gern hätte. Da muss wohl doch mit JavaScript ran.

          Qapla'

          --
          Alle Menschen sind klug. Die einen vorher, die anderen nachher. (John Steinbeck)
  2. @@Ralf:

    nuqneH

    Ich habe schon versucht mit der focus() Funktion zu arbeitern, leider klappt das jedoch nicht.

    Du möchtest nicht den Fokus setzen, sondern ihn http://de.selfhtml.org/javascript/objekte/htmlelemente.htm#a@title=entfernen.

    Qapla'

    --
    Alle Menschen sind klug. Die einen vorher, die anderen nachher. (John Steinbeck)
  3. Leider setzt der Browser (Firefox) immer einen unschönen Focus auf das angeklickte Tab (gepunktete Linie um das Tab).

    Was ist denn daran unschön? Ich finde diesen Rahmen dezent und darüber hinaus ist es ja auch ein wichtiges Merkmal.

    Wo ist der Sinn darin, etwas Schönes, Sinnvolles und für manche auch Wichtiges zu unterdrücken?
    Versuch doch mal auf so einer Seite mit der Tastatur zu surfen, es ist unangenehm, weil du nicht mehr siehst welchen Link du gerade ektiviert hast. Gerade in Zeiten wo sich Laptop, Netbook o.ä verbreiten sind solche Sachen wichtig, da dort die Bedienung der Maus bzw. des Mauspads eher unhandlich ist.

    Struppi.

    1. Leider setzt der Browser (Firefox) immer einen unschönen Focus auf das angeklickte Tab (gepunktete Linie um das Tab).

      Was ist denn daran unschön? Ich finde diesen Rahmen dezent und darüber hinaus ist es ja auch ein wichtiges Merkmal.

      Der Rahmen ist nicht immer dezent, sondern manchmal irreführend. Wenn etwa mit absoluter Positionierung gearbeitet wird.

      Wo ist der Sinn darin, etwas Schönes,

      Willst du mich töten?

      Sinnvolles und für manche auch Wichtiges zu unterdrücken?

      Der Sinn besteht für :focus. Er besteht aber nicht für :active
      Das sinnvolle ist in diesem Falle die outline. Du kannst die outline aber auch durch eine andere markantere und schönere Formatierung ersetzen.

      Versuch doch mal auf so einer Seite mit der Tastatur zu surfen, es ist unangenehm, weil du nicht mehr siehst welchen Link du gerade ektiviert hast.

      Nicht ektiviert, sondern fokusiert. Diese Information ist nützlich bei seiteninternen Fragmentlinks, bei Links, die mit :target einblenden lassen oder JS Elementen die eine über eine Funktion den Browser navigieren lassen.
      However, bei einem AJAX-Request (dieses Element speichern) ist :outline zwar ein Indiz dafür, dass ich den Button gedrückt habe. Aber nicht zwangslöufig dafür, dass der Request erfolgreich abgesetzt wurde und das Speichern erfolgreich war.

      Gerade in Zeiten wo sich Laptop, Netbook o.ä verbreiten sind solche Sachen wichtig, da dort die Bedienung der Maus bzw. des Mauspads eher unhandlich ist.

      Ähm. Diese Zeiten sind doch schon lange. Let's talk 'bout touchscreens.

      Ich finde die Ameisenlinie nicht unbedingt optimal. Ersetze sie durch etwas besseres.

      mfg Beat

      --
      ><o(((°>           ><o(((°>
         <°)))o><                     ><o(((°>o
      Der Valigator leibt diese Fische
      1. Hallo,

        Ich finde die Ameisenlinie nicht unbedingt optimal. Ersetze sie durch etwas besseres.

        einverstanden - aber ersetze sie nicht durch Nichts, oder durch etwas, das man nicht sieht. Der Focus muss klar erkennbar bleiben.

        Ciao,
         Martin

        --
        Soso, der Klügere gibt nach.
        Aber warum sollen sich immer nur die Dummen durchsetzen?  .oO(?)
      2. Was ist denn daran unschön? Ich finde diesen Rahmen dezent und darüber hinaus ist es ja auch ein wichtiges Merkmal.

        Der Rahmen ist nicht immer dezent, sondern manchmal irreführend. Wenn etwa mit absoluter Positionierung gearbeitet wird.

        Das verstehe ich nicht. Was ist, in welchem Fall irreführend? Was hat die Markierung mit Positionierung zu tun?

        Wo ist der Sinn darin, etwas Schönes,

        Willst du mich töten?

        Wieso? Mir ist es schon immer unbegreiflich was an so einem dezenten Merkmal nicht schön sein soll. Mir gefallen auch die grauen Scrollbalken von windows, im gegensatz zu den häßlichen am Mac.

        Sinnvolles und für manche auch Wichtiges zu unterdrücken?

        Der Sinn besteht für :focus. Er besteht aber nicht für :active

        Gerade das ist doch noch wichtiger, wenn die Seite nicht gewechselt wurde, wg. Ajax oder Frames oder sowas, damit man sieht, welchen Link man zuletzt gedrückt hatte. Aber du hast recht, bei normalen Links oder Buttons ist es natürlich :focus

        Das sinnvolle ist in diesem Falle die outline. Du kannst die outline aber auch durch eine andere markantere und schönere Formatierung ersetzen.

        Hab ich auch schon gesehen. Das ist dann der übliche hilflose Versuch, ein dem Benutzer bekanntes Merkmal, mit etwas vermeintlich Schönerem (was sowieso immer nur relativ ist) zu ersetzen. Wer's mag - für hilfreich halte ich das nicht.

        Nicht ektiviert, sondern fokusiert. Diese Information ist nützlich bei seiteninternen Fragmentlinks, bei Links, die mit :target einblenden lassen oder JS Elementen die eine über eine Funktion den Browser navigieren lassen.

        Wieso? Diese information ist bei allen Links oder Buttons wichtig, du kannst ohne sie kaum mit der Tastatur surfen.

        Gerade in Zeiten wo sich Laptop, Netbook o.ä verbreiten sind solche Sachen wichtig, da dort die Bedienung der Maus bzw. des Mauspads eher unhandlich ist.

        Ähm. Diese Zeiten sind doch schon lange. Let's talk 'bout touchscreens.

        Naja, kann u.u. sein, dass mein Bekanntenkreis Computertechnisch eher Mittelmaß ist. Der Laptop verbreitet sich jetzt erst seit dem letzten Jahr.

        Ich finde die Ameisenlinie nicht unbedingt optimal. Ersetze sie durch etwas besseres.

        Mir würde nichts einfallen, ich bin sie von meinem Betriebsystem gewohnt und weiß was sie bedeutet.

        Struppi.

        1. @@Struppi:

          nuqneH

          Gerade das ist doch noch wichtiger, wenn die Seite nicht gewechselt wurde, wg. Ajax oder Frames oder sowas, damit man sieht, welchen Link man zuletzt gedrückt hatte.

          Wenn dem Nutzer angezeigt werden muss, worauf er gerade geclickt hat, dann aber bitte richtig: etwas auffälliger als durch einen dünnen gepunkteten Rahmen.

          Qapla'

          --
          Alle Menschen sind klug. Die einen vorher, die anderen nachher. (John Steinbeck)
          1. [latex]Mae  govannen![/latex]

            Wenn dem Nutzer angezeigt werden muss, worauf er gerade geclickt hat, dann aber bitte richtig: etwas auffälliger als durch einen dünnen gepunkteten Rahmen.

            a:active,  
            a:focus {  
               text-decoration: blink;  
            }
            

            SCNR

            Cü,

            Kai

            --
            Even if you are a master of jQuery, you can only create mediocre (at best)
            scripts. The problem is that the authors you rely on have not mastered the
            DOM themselves. It's like one blind guy leading another off a cliff (D.Mark/clj)
            Foren-Stylesheet Site Selfzeug JS-Lookup
            SelfCode: sh:( fo:| ch:? rl:( br:< n4:( ie:{ mo:| va:) js:| de:> zu:) fl:( ss:| ls:?
    2. @@Struppi:

      nuqneH

      Wo ist der Sinn darin, etwas Schönes, Sinnvolles und für manche auch Wichtiges zu unterdrücken?

      Wo ist der Sinn darin, etwas Unschönes, nicht Sinnvolles und für niemanden Wichtiges darzustellen?

      Dabei geht es mir nicht um den Rahmen (outline) beim Herumspringen per Tastatur – dabei muss natürlich angezeigt werden, welches Element gerade den Fokus hat –, sondern um die Zeit nach der erfolgten Nutzeraktion (Click/[Enter]). Dann kann der Rahmen durchaus weg.

      Qapla'

      --
      Alle Menschen sind klug. Die einen vorher, die anderen nachher. (John Steinbeck)