Colorfade nach/während Texteingabe

[inside08]

Ich hatte gerade die Idee, ein Form so zu modifizieren, dass ein Textfeld eines HTML Forms die Hintergrundfarbe ändert, sobald eine Tastatureingabe in diesem Feld gemacht wurde.

Ist das mit Javascript in der Weise möglich? Gibt es dafür schon fertige Scripts?

Danke schonmal,
Daniel

[polysign]

Hi,

also möglich ist es! Fertige Skripts kenn ich jetzt keine, aber eine Möglichkeit schon

Ich bevorzuge eine Javascript Bibliothek namens jQuery (www.jquery.com). Mit dieser Bibliothek könnte man es so machen:

Mit Hilfe von jQuery einen Selector auf alle Formularfelder machen:

$(':text').keyup(function() {
  ...
});

Mit diesem Code wird alles was im ... ist bei jedem KeyUp auf der Tastatur in einem Text-Feld ausgeführt. Also brauchen wir noch ein wenig Code um den Hintergrund farblich zu animieren.

Der Code zum animieren könnte so aussehn:

$(this).animate({
  bgcolor: 'FFBBBB'
}, 2000, function() {
  $(this).animate({
    bgcolor: 'FFFFFF'
  }, 1000);
}

Dieser Code, sofern 100% korrekt (habs nicht kontrolliert), würde das HTML-Element 'this' animieren. Zunächst 2 Sekunden lang die Hintergrundfarbe von der initialen Farbe bis hin zu 'FFBBBB'. Danach eine Sekunde lang wieder zurück auf Weiss!

Diese Animation packen wir nun in den ersten Code, und voila:

$(':text').keyup(function() {
  $(this).animate({
    bgcolor: 'FFBBBB'
  }, 2000, function() {
    $(this).animate({
      bgcolor: 'FFFFFF'
    }, 1000);
  }
});

Man müsste den Code natürlich checken ob er überhaupt 100% OK ist. Habs aus dem Stehgreif gezaubert. Also keine Garantie. Aber so ähnlich könnte das ganze aussehn.

Das tolle daran, man braucht keine JavaScript-Aufrufe im HTML Code zu hinterlegen. Und wenn JavaScript deaktiviert ist, kann man weiterhin damit arbeiten ohne das die Seite steht.

Man benötigt hierfür nur die jQuery Bibliothek.

lg

[inside08]

Bin gerade dabei mich ein wenig einzuarbeiten in jQuery.
Dein Code funktioniert so nicht. Warum weiß ich noch nicht.
Weiß jQuery denn, dass this auch das Textfeld ist, was gerade bearbeitet wird, ist? Da vermute ich z.Zt. den Fehler.
Dass die Seite/das Form zusätzlich auch CSS benutzt sollte kein Problem sein, oder?

[polysign]

Hi,

ja CSS ist kein Problem. jQuery überschreibt dein CSS nicht, bis auf den CSS den du animierst.

this sollte bei jQuery immer das aktuelle HTML-Element zurückgeben.

Wie gesagt, der Code wurde so aus dem Stehgreif geschrieben. Am einfachsten mal einzelne Passagen auskommentieren und zum testen ein alert(); einfügen um zu sehn bis wohin das Skript überhaupt kommt, bzw. ein wenig Firebug nutzen!

lg