Gestrichelte Linien um einen Link verstecken, ohne Tastatursurfer zu benachteiligen, outline, -moz-outline und hidefocus ade ...

Früher habe ich nach einer Lösung Ausschau gehalten, um die gestrichelten Linien beim draufklicken auf einen Link zu
eliminieren, aber sie trotzdem während eines Tastaturgesteuerten Focus anzuzeigen.
Doch immer nur gab es Lösungen für das allgemeine Verstecken der gestrichlten Linien um einen Link,
doch damit war der Tastaturfocus dahin.

Was outline:0, (oder auch -moz-outline:0 für ältere Geckos), ist "hidefocus" im Link-Element für den IE:
Die teilweise unschönen gestrichelten Linien um einen Link, während der Link einen Focus erhält, verschwinden.
Wenn man diese Methode verwendet, sperrt man Nutzer aus, die per Tastatur surfen wollen,
denn der Benutzer kann den Focus optisch nicht mehr verfolgen, bzw. im IE verschwindet er gänzlich.

Doch für dieses Dilemma habe ich eine Lösung in JavaScript programmiert:
Javascript eignet sich gut zur Verschönerung der Seite, denn die wenigen Nutzer,
die ohne JS surfen können ruhig diese gestrichelten Focusanzeiger sehen, wenn dadurch die Seite
Tastaturfreundlich bleibt.

Und hier meine Crossbrowser Lösung, die sich sehr schön global in einer externen Javascript Datei einbinden lässt,
den Linkfocus beim Draufklicken versteckt, per Tastatur - (Tab - Taste) - Surfen aber den Focus anzeigt.

Erweitert:
Habe ein paar mal gelesen, dass sich das Script nicht einbinden lässt, was folgende Ursachen haben kann:

1.) Es exisitiert im body - Tag ein onload Attribut. Das muss weg ! Alles was drin steht, muss dann in die "init" - Funktion einfach unten drangehängt werden, genauso, wie es im body onload="....code..." drin steht - also:

function init()
{
...mein code hier unten....
...code... (aus body onload="...code...").
}

2.) Es existiert bereits irgendwo ein window.onload, was man aber im Javascript Jungel nicht finden kann, darum habe ich mein Script leicht abgeändert, sodass es auch dann funktioniert, falls schon ein window.onload vorhanden ist. Dafür muss das folgende Script als letztes geladen werden, oder noch besser: in der letzten Javascript Datei ganz unten im Code einfach drangehängt werden.

3.)Wichtig ist auch, dass es keine zweite "init" - Funktion gibt. Sonst muss meine umbenannt werden in finalInit zb., dann aber auch window.onload=finalInit zum schluss hinschreiben.

4.) Es gibt bereits Eventhandler für a-Tags mit Javascript, für die Events, die ich auch in meinem Script benutze. Die müssen dann - wie in meinem Scriptbeispiel mit window.onload - alle in eine einzige Funktion pro Eventhandler zusammengefasst werden.

Testet es selbst hier auf meiner Seite. Zusammen mit meinem css non-js Hover für Bilder ergibt es einen netten "Nebeneffekt" in der Navi oben.

Zur Kurzen Version, meist ausreichend

Zur Kurzversion, die zusätzlich auch <input type="image", <input type="submit", <input type="reset", <input type="button", <input type="checkbox" und <input type="radio" Tags vor dem Outline schützt - natürlich auch Tab fähig

window.undefined = window.undefined; // für ältere Javascript Versionen, die undefined nicht als Wert kannten, wie zB im IE 5.01 *.

function init()
{
   var a=document.getElementsByTagName('a');

   for (var i=0;i<a.length;i++) { /* //www.tomislav.net/gestrichelte-linie-um-link-verstecken.htm */
      a[i].onmousedown = function()
      {
         this.onfocus = function()
         {
            this.blur();
         }
      }
      a[i].onmouseup = function()
      {
         this.onfocus = function(){}
      }
      a[i].onmouseout = a[i].onmouseup;
   }
}

if ( (window.onload === undefined) || (window.onload === null) ) {
   window.onload = window.init;
}
else {
   window.myLoad = window.onload;
   window.onload = function()
   {
      window.myLoad();
      window.init();
   }
}

Kurz, bündig und wirkungsvoll..
Hier könnt Ihr das Script in einer Beispielseite Eingebettet als selbstentpackendes ZIP - Archiv Downloaden.

 

Oder wer keine "exe"-Dateien "mag", kann hier das selbe, als gewöhnliches Zip - Archiv Downloaden.

 

Hier noch einmal die Kurzfassung (Kurzversion):

function init()
{
   var a=document.getElementsByTagName('a');

   for (var i=0;i<a.length;i++) { /* //www.tomislav.net/gestrichelte-linie-um-link-verstecken.htm */
      a[i].onmousedown = function()
      {
         this.onfocus = function()
         {
            this.blur();
         }
      }
      a[i].onmouseup = function()
      {
         this.onfocus = function(){}
      }
      a[i].onmouseout = a[i].onmouseup;
   }
}

window.onload = init;


 

In den Beispielen zum Downloaden steht etwas mehr Info drin, und auch die einfache, hier als Kurzfassung dargestellte, (im Download auskommentierte) Version für den Fall, dass man sonst onload keine Funktionen auruft!

 

NEU !!
Und hier nocheinmal die Version, die auch die Submit Input-Tags, Image Input-Tags, Reset Input-Tags, Button Input-Tags, Checkbox Input-Tags und Radio Input-Tags mit einbezieht, denn die reagieren auch mit der gestrichelten Linie (Outline), wenn man diese anklickt. Genau das selbe Verfahren, wie für die Links, nur dass jetzt auch noch die genannten Input Tags mit einbezogen werden...

 

function init()
{
    /* //www.tomislav.net/gestrichelte-linie-um-link-verstecken.htm */
   var a=document.getElementsByTagName('a');
   var inp=document.getElementsByTagName('input');
   var arr=[];

   for (var i=0;i<a.length;i++) {
      arr[i] = a[i]; /* Hier aus dem ObjectRange ein Array machen, um den nächsten Range angenehm per concat mit einzubinden (push ginge auch, doch ich benutze concat wegen der Abwärtskompatibilität) */
   }

   for (i=0;i<inp.length;i++) {
      if(inp[i].type == 'submit' || inp[i].type == 'image' || inp[i].type == 'reset' || inp[i].type == 'button' || inp[i].type == 'checkbox' || inp[i].type == 'radio') {
         arr = arr.concat([inp[i]]);
      }
   }

   a = arr;

   for (i=0;i<a.length;i++) {
      a[i].onmousedown = function()
      {
         this.onfocus = function()
         {
            this.blur();
         }
      }
      a[i].onmouseup = function()
      {
         this.onfocus = function(){}
      }
      a[i].onmouseout = a[i].onmouseup;
   }
}

window.onload = init;


 

Bevor es weiter geht, ein kleines Häppchen für zwischen durch und zwar:

Flash und Ersatzbild W3C Valide kinderleicht ohne Javascript, ohne CSS, nur mit 3 -6 Zeilen Validem HTML einbinden

 

Wie binde ich intelligent ein Flashfilm im HTML ein?

 

Falls Ihr zu den bisherigen, folgenden oder verwandten Themen Fragen habt,
dann schreibt mich doch einfach unter webentwicklung@tomislav.net an.

Ich werde sobald möglich Eure Fragen beantworten und einiger dieser Fragen und
Antorten auf meiner(dieser) Site veröffentlichen, es sei denn Ihr möchtet es ausdrücklich nicht.
Es gibt ja einschägige Foren, ich weiß.. Nur dass dort immer wieder unqualifizierte Fragen auftauchen und
ich neben meiner Arbeit als Entwickler keine Lust habe Fragen hier zu veröffentlichen, die schon zig mal beantwortet
wurden. Es sollen hier tatsächlich nur anspruchsvolle Themen auftauchen, die noch nicht, unzureichend oder gar
unzufiedenstellend behandelt wurden. Desahalb auch eine "Zensur" meinerseits um die Spreu vom Weizen zu trennen, damit
hier ein kleines Nachschlagewerk für ernstzunehmende Probleme entsteht.. Ich hoffe auf eure Zusammenarbeit.
Nichts desto trotz beantworte ich gerne auch Themen, die nicht meinem "Raster" entsprechen, doch werde ich diese
hier nicht veröffentlichen, sondern in solchen Fällen jedem einzeln persönlich die Antwort zusenden,
sobald es meine Zeit erlaubt.

^* (window.undefined=window.undefined) Teste es selbst - wenn Du einen IE 5.01 hast. Wenn nicht, googelst Du unter MultipleIEs Dowonload, dann bekommste sie alle, ab Version 3, glaube ich - 4 auf jeden Fall. Prototype.js lässt sich locker bis auf IE 5.01 kompatibel machen, ist nur ein wenig Fleißarbeit. Bei Beamer.De gehts auch, da benutze ichs auch, ein wenig abgewandelt, das Ajax Objekt gegen ein Iframe Objekt ausgetauscht, damit dieser Active-x Kram net nervt.
Also:
Probier mal im IE 5.01 das hier: alert(undefined);... es geht nicht, weil der gute 5er IE undefined als Wert nicht kennt, nur als typeof. Also alert(typeof undefined) oder auch alert(typeof skdhgfhjsd) wirft einen String raus, in dem "undefined" drin steht, was bedeutet, dass intern schon klar ist, dass eine nicht definierte Variable nicht ohne weiteres angesprochen werden kann, aber durchaus als nicht definiert wahrgenommen werden kann. Folgender Trick: Man hängt eine bestimmte nicht existerende Variable an das window objekt dran, da window schon definiert ist, nur dass das angehängte undefined bei diesen älteren unbekannt ist (alle öffentlichen Variablen hängen automatisch am window Objekt) - also definiert man window.undefined mit window.undefined und hat somit eine Globale Variable namens undefined, die genau das enthält, was sie soll, den Typ undefined, und Abfragen muss man es vorher auch net, da undefined in neuerem Javascript genau dort sitzt.
Zum Verständnis (außerhalb einer Funktion):

var Wert = 22;
ist das Selbe wie window.Wert = 22, oder auch window['Wert'] = 22;
Demnach ist Global die Variable Wert mit 22 belegt.
Also auch undefined ist gleich window.undefined ist gleich window['undefined'].

Ich mache mir immer eine window.$GLOBALS = {}; (das selbe, wie window.$GLOBALS = new Object();)
Danach kann man zB mit $GLOBALS.time_start = new Date().getTime(); aus $GLOBALS.time_start immer und überall die Zeit auslesen, wann das Script gestartet wurde und dann ab und an dem User sagen wie lange er schon auf der Seite ist, oder einen Sekundenzähler einbauen, als Triviales Beispiel.
Dann Kann ich überall, wie bei PHP an Meine vordefinierten $GLOBALS ran, ohne mir Sorgen machen zu müssen, dass ich da irgendwelche Variablennamensräume verletze, oder gar meine eigen gesetzten Variablen überschreibe.