Er is geen CSS ondersteuning.
Met hele eenvoudige zaken kan je het leven een stuk makkelijker maken. Als je met lange formulieren aan het werk ben (of een bezoeker van jouw website moet door een lange lijst met input-velden "heenploegen") kan het handig zijn om te zien welk veld er focus heeft. Om dat voor elkaar te krijgen is er een hele simpele functie bij de "html form events". Met onfocus kan je een script iets laten doen als een veld "focus" krijgt, en om het script weer ongedaan te maken kan je onblur gebruiken. Het voorbeeld spreekt voor zich-zelf. Onderop de pagina staat de code van het formulier en onder die code staat een stukje javascript met twee functies (die de kleuren van het input-veld veranderen naar gelang een veld focus heeft of niet).
<form method="post" action="" onsubmit="">
<div>
<div>
<label for="onfocus-input-1">onfocus-input-1 </label>
<input onfocus="change_it(1)" onblur="change_it_back(1)" class="on-focus" type="text" id="onfocus-input-1" value="klik met de" name="onfocus-input-1" />
</div>
<div>
<label for="onfocus-input-2">onfocus-input-2 </label>
<input onfocus="change_it(2)" onblur="change_it_back(2)" class="on-focus" type="text" id="onfocus-input-2" value="muis op" name="onfocus-input-2" />
</div>
<div>
<label for="onfocus-input-3">onfocus-input-3 </label>
<input onfocus="change_it(3)" onblur="change_it_back(3)" class="on-focus" type="text" id="onfocus-input-3" value="een veld" name="onfocus-input-3" />
</div>
</div>
</form>
<script type="text/javascript">
// basis functie getElementsByClass
function getElementsByClass(knoopje,doedezeclass,tag){
var i,j,klaselementen=[];
var elementjes=knoopje.getElementsByTagName(tag);
var elementjeslengte=elementjes.length;
var hetpatroon=new RegExp(doedezeclass);
for (i=0,j=0;i<elementjeslengte;i++){
if (hetpatroon.test(elementjes[i].className)){
klaselementen[j]=elementjes[i];
j++;}}
return klaselementen;}
// functie die door onfocus wordt aangeroepen
function change_it(welke){
welke--;
var elvars = getElementsByClass(document,'on-focus','*');
elvars[welke].style.backgroundColor='#B8860B';
elvars[welke].style.color='#8B0000';}
// functie die door onblur wordt aangeroepen
function change_it_back(welke){
welke--;
var elvars = getElementsByClass(document,'on-focus','*');
elvars[welke].style.backgroundColor='#BDB76B';
elvars[welke].style.color='#000000';}
</script>
cache 20-09-2010