StyleAssistant |
| Startseite |
 |
| Screenshot |
|
| Kurzanleitung |
|
| Download |
|
| Kurse & Infos |
|
| >Tipps & Tricks< |
|
| Unterstützer |
|
| TMXtensions |
|
| ?Freeware! |
|
| About TM |
|
Stand: 07.12.2002 |
Tipps & Tricks – Tipp 69
|
 |
 |
 |
|
69.
document.activeElement (IE) (01.11.2001)
Im Internet Explorer existiert für das document-Object die Eigenschaft activeElement. Damit lassen sich interessante Anwendungen realisieren. Das aktive Element hat den Focus, was man auch über den Event-Handler onfocus
abgreifen kann. Dazu wäre allerdings eine separate Behandlung der einzelnen Elemente nötig (siehe auch Tipp 42).
Interessant ist die Anwendung von document.activeElement etwa bei mehreren INPUT-Feldern vom TYPE="text". Aktiviert man ein solches Feld durch Hineinklicken bzw. mittels TAB-Taste, ändern sich Hintergrund- und Textfarbe.
Beim Verlassen des Feldes wird der ursprüngliche Zustand wieder hergestellt. Dieses Verhalten wurde im folgenden JavaScript implementiert.
var aktElement=null;
window.onload=Init;
function Init()
{
if(document.activeElement)
{
document.attachEvent("onpropertychange",Textfeldmarker);
}
}
function Textfeldmarker()
{
if(event.propertyName=="activeElement")
{
aktElementName=document.activeElement.tagName.toLowerCase();
aktElementAttr=document.activeElement.getAttribute("type");
if(aktElement!=null)
{
aktElement.style.color="#000000";
aktElement.style.backgroundColor="#FFFFFF";
}
if(aktElementName=="input" && aktElementAttr=="text")
{
aktElement=document.activeElement;
aktElement.style.color="#0000C0";
aktElement.style.backgroundColor="#FFFFDD";
}
else
{
aktElement=null;
}
}
}
Beispiel 69 funktioniert im IE 5+ und eignet sich eher für Intranet-Projekte bzw. dann, wenn der in anderen Browsern fehlende Effekt nicht als Makel der Site verstanden wird.
|
|
 |
|
 |