[CSS] iets:focus 'nette' oplossing IE - Softwareontwikkeling

zondag 24 april 2005 21:34

Acties:

Moderator Wonen & Mobiliteit / General Chat

Topicstarter

De volgende (verkleinde) situatieschets:

HTML:

1 2	<label for="emailadres">E-mail:</label> <input type="text" id="emailadres" name="data[emailadres]" value="">

Cascading Stylesheet:

input:focus {
    background-color: #fff;
    border: 1px dotted #000;
}

Het probleem
Dit werkt prachtig in Firefox (en zal ook vast prachtig werken in andere browsers), maar IE ligt dwars en doet gewoon helemaal niks met de input:focus.

Mogelijke oplossing(en)
Aangezien ik dit toch graag wil laten werken in IE, heb ik dus naar een oplossing gezocht. Search geeft een hoop oplossing m.b.t. het a:hover probleem en element focus, maar dat zoek ik dus niet. Toch wel het een en ander gevonden uiteindelijk met google en de GoT search.

Oplossing nummertje 1:

HTML:

1 2	<label for="emailadres">E-mail:</label> <input type="text" id="emailadres" onfocus ="this.className='focusstyle'" name="data[emailadres]" value="">

+ de bijbehorende .focusstyle uiteraard. Toch vind ik deze oplossing niet geweldig, aangezien ik graag mijn code schoon zou willen houden ten opzichte van andere browsers van dit soort IE only oplossingen. Alle andere grote browsers kunnen namelijk prima met de CSS overweg en dat wil ik dan graag ook zou houden (dus geen 'nutteloze' JS toevoegingen). Bovenstaande oplossing met een kleine aanpassing:

HTML:

1 2	<label for="emailadres">E-mail:</label> <input type="text" id="emailadres" <!--[if IE]>onfocus ="this.className='focusstyle'"<![endif]--> name="data[emailadres]" value="">

Het bovenstaande zou kunnen, maar lijkt me ook een beetje omslachtig.

De vraag
Overzie ik een oplossing die ook nog mogelijk is

? Het liefst zou ik met 1 extern JS bestand het willen oplossen zodat ik maar 1 bestand tussen de conditional comments hoef te zetten om het werkend te krijgen

[ Voor 41% gewijzigd door We Are Borg op 24-04-2005 21:36 ]

zondag 24 april 2005 21:41

Acties:

Verwijderd

Aangezien je het zelf niet noemde: http://dean.edwards.name/IE7/

zondag 24 april 2005 22:02

Acties:

We Are Borg

Moderator Wonen & Mobiliteit / General Chat

Topicstarter

Op zich wel de oplossing die ik zoek (1 extern JS file), maar 33kb om 1 probleem te fixen is vrij veel

Aan de andere kant, het lost gelijk nog een hoop andere problemen op.

zondag 24 april 2005 22:30

Acties:

djluc

Kan je niet met JavaScript het event er aan koppelen? Net zoals je in plaats van <body onload="javascript:function();"> ook dit kan schrijven?: window.onload=function();

Dan zou het iets moeten zijn als document.getElementById('emailadres').onfocus=function();

maandag 25 april 2005 00:19

Acties:

SuperRembo

Van whatever:hover kan je denk ik zonder al te veel moeite een whaterver:focus versie maken.

| Toen / Nu

maandag 25 april 2005 12:29

Acties:

Clay

cookie erbij?

Dat kan inderdaad, met een hele dikke "maar": IE kent :focus niet; als je deze property met script opvraagt krijg je "unknown" terug, input:focus wordt dan dus input:unknown. De htc kan je vrij makkelijk ombouwen om unknown te interpreteren als focus, en dan focus events toe te wijzen aan elementen, maar dat zou dan voor elke pseudoclass gebeuren die IE niet herkent.

Op zich is dat voor het gros van de html elementen niet erg, omdat de toegewezen focus events toch alleen maar voor inputs werken, maar dat betekent voor die input elementen dat je in je css dus geen pseudo's mag gebruiken die IE niet kent, omdat ook iets als :last-child dan ook als focus command geinterpreteerd wordt, aangezien ook dat als unknown terugkomt, en er geen onderscheid te maken is.

code is simpel:

code:

var currentSheet, doc = window.document, activators = {
   onhover:{on:'onmouseover', off:'onmouseout'},
   onactive:{on:'onmousedown', off:'onmouseup'},
   onunknown:{on:'onfucus', off:'onblur'}
}

en overal waar hover|active staat ff veranderen in hover|active|unknown. Alleen geloof ik dat ik nu inene een bug zie

ff checken vanavond.

Instagram | Flickr | "Let my music become battle cries" - Frédéric Chopin

maandag 25 april 2005 15:08

Acties:

Scurra

Het idee om het whatever:hover-script van Clay aan te passen is al uitgevoerd en lijkt prima te werken. Het script maakt gebruikt van de de 'unknown'-truc, dus let wel op met andere :pseudoclasses, zoals Clay al opmerkt.

maandag 25 april 2005 15:37

Acties:

We Are Borg

Moderator Wonen & Mobiliteit / General Chat

Topicstarter

thanks voor de tips. Ik ga hier wel mee uitkomen en zal idd moeten oppassen met de *:unknown, maar dat komt wel goed

dinsdag 26 april 2005 17:02

Acties:

Verwijderd

En heb je al een passende oplossing gevonden?

woensdag 27 april 2005 10:17

Acties:

wustenveld

Ik zou in js met een eventlistener werken in dit geval.
En vervolgens voor je input velden het event focus en blur afvangen, en aan het element die gefocust wordt een andere className hangen om zo je border er omheen te krijgen.

woensdag 27 april 2005 10:24

Acties:

We Are Borg

Moderator Wonen & Mobiliteit / General Chat

Topicstarter

Ja, ik ga voor de IE7 oplossing of deze

Ik kijk nog even welke ik het beste kan pakken