[Løst]Sette onFocus blur() på mange elementer

[G2Petter]

For å unngå den stiplete linjen som oppstår rundt en lenke når den blir satt i fokus ønsker jeg å sette onfocus="blur()" på alle lenkene automatisk i stedet for å skrive det inn manuelt for hver lenke.

 

Menyen det gjelder er strukturert som følger:

<ul>
<li class="menuitem"><a href="blabla">Lenke 1</a></li>
<li class="menuitem"><a href="blabla">Lenke 2</a></li>
<li class="menuitem"><a href="blabla">Lenke 3</a></li>
</ul>

Jeg ser for meg at jeg må gjøre noe sånt:

Velg alle lenker som er under elementer med klasse menuitem

Sett onfocus="this.blur()" for alle elementene.

 

Er det noen som har noen gode forslag til hvordan dette kan løses?

[trygveaa]

Er ganske tungvidt / jeg vet ikke hvordan man finner alle elementer under en klasse, så jeg skrev så den tar alle a-elementer. Hvis du ikke vil det kan du sette en id på ul, og ta alle elementer under den.

if( window.addEventListener ) {
window.addEventListener('load',loadFunction,false);
} else if( document.addEventListener ) {
document.addEventListener('load',loadFunction,false);
}

function loadFunction()
{
var a=document.getElementsByTagName('a');
for(var i=0,j;j=a[i];i++)
{
 j.onfocus = function() { blur(); }
}
}

Endret 16. mars 2009 av trygveaa

[G2Petter]

Det fungerte strålende. Takk skal du ha. Når det gjelder å velge alle elementer fra en klasse finnes det funksjoner som gjør det, og jeg tror de fleste bibliotekene (Prototype, jQuery) har gjort det ganske enkelt.

[LostOblivion]

Dette var jo fantastisk smart! Nå kan ikke folk bruke tastaturet til å navigere nettsiden din! Kanskje ikke så farlig, men husk på at blur on focus ikke er veldig smart.

[JohndoeMAKT]

WTF? Javascript onload for å legge en listener på fokus på alle lenker for å blure? Gir ikke dette samme effekt og er en smule .. bedre?

 

a:focus {

outline : none;

}

[LostOblivion]

Oj...den har jeg lett etter! TAKK! Visste ikke at det fantes noe slikt. ^^ Åssen er støtten på denne mtp nettlesere?

 

Funka for a-tags i Firefox, men ikke <input type="button" />.

Endret 20. mars 2009 av LostOblivion

[JohndoeMAKT]

a:focus, input[type=button]:focus {

outline:none;

}

 

Dette fungerer ikke? Fungerer det i FF?

[LostOblivion]

Nei, funker ikke i FF. Får stiplet linje rundt teksten inni knappen når man trykker på den. Heller ikke input { outline: none; }.

Endret 21. mars 2009 av LostOblivion