Programmierung Javascript

Dieses Thema im Forum "Webentwicklung" wurde erstellt von Reamos, 24. Februar 2007 .

  1. 24. Februar 2007
    Zum Thema: Programmierung Javascript
    Formularfelder markieren

    Formulare

    In umfangreichen Formularen verlieren die Nutzer schnell den Überblick.Da hilft es, das aktuelle Eingabefeld ein wenig hervorzuheben. Das geht am einfachsten per Javascript und CSS. Das folgende Beispiel ändert die Umrandung eines Eingabefeldes, sobald es den Fokus erhält. Das passiert zum Beispiel dann, wenn der Besucher der Seite in das Feld klickt. Verlässt der Besucher das Feld wieder, verliert das Feld den Fokus und färbt sich wieder normal. Das Programm dazu sieht so aus:

    <html>
    <head>
    <title>Demo</title>
    <style type="text/css">
    normal {border: solid black 1px;}
    highlight {border: solid red 2px;}
    </style>
    <script type="text/javascript">
    function changeCSSClass
    (element,newClass)
    {
    document.getElementById(element.id).className = newClass;
    }
    </script>
    </head>

    <body>
    <form action="" method="GET">
    <input id="nname" class="normal" name="nachname" onfocus="javascript:changeCSSClass (this, 'highlight')"
    onblur="javascript:changeCSSClass (this, 'normal')"/>
    <input type="submit"/>
    </form>
    </body>
    </html>
    Zunächst definieren Sie die beiden Stilvorlagen für die Umrandung als Klassen. Danach geht es an das Kernstück: Die Funktion changeCSSClass erwartet als Parameter ein Element und die Bezeichnung der Klasse, die es zuweisen soll. Anhand der mit element.id ermittelten eindeutigen Kennung des Elements kann Javascript der Eigenschaft class Name nun eine neue Klasse zuweisen.
     
  2. 24. Februar 2007
    AW: Programmierung Javascript

    Warum so, wenns auch mit CSS ohne JS geht?

    <style type="text/css">
    input {
    background-color: #CDCDCD;
    }
    input:hover, input:focus, input:active {
    background-color: #C0C0C0;
    }
    </style>


    (oder so ähnlich )
     
  3. Video Script

    Videos zum Themenbereich

    * gefundene Videos auf YouTube, anhand der Überschrift.