Hinweis:

Spry-Widgets werden ab Dreamweaver CC durch jQuery-Widgets ersetzt. Sie können zwar vorhandene Spry-Widgets auf der Seite noch ändern, aber Sie können keine neuen Spry-Widgets hinzufügen.

Widget „Überprüfung - Textbereich“

Mit dem Spry-Widget vom Typ „Überprüfung - Textbereich“ werden gültige bzw. ungültige Zustände bei der Eingabe von Sätzen durch den Site-Besucher angezeigt. Wenn der Textbereich als erforderliches Feld definiert wurde und der Benutzer keinen Text eingibt, zeigt das Widget eine Meldung mit der Aufforderung zur Texteingabe an.

Das folgende Beispiel zeigt das Widget „Überprüfung - Textbereich“ in verschiedenen Zuständen:

A. Zähler für die restlichen Zeichen B. Textbereich-Widget im Fokus, Zeichen max.-Zustand C. Textbereich-Widget im Fokus, gültiger Zustand D. Textbereich-Widget, erforderlicher Zustand E. Zähler für die eingegebenen Zeichen 

Das Widget „Überprüfung - Textbereich“ beinhaltet mehrere Zustände (z. B. Gültig, Ungültig, Erforderlich usw.). Sie können die Eigenschaften für diese Zustände, je nach gewünschtem Überprüfungstyp, mit dem Eigenschafteninspektor anpassen. Mit diesem Widget lassen sich unterschiedliche Aspekte überprüfen, z. B. wenn der Besucher außerhalb des Widgets klickt, bei der Texteingabe oder beim Abschicken des Formulars.

Anfangszustand

Der Widget-Zustand, in dem die Seite in den Browser geladen wird oder der Benutzer das Formular zurücksetzt.

Zustand „Fokus“

Der Widget-Zustand, in dem der Besucher im Widget einen Einfügepunkt setzt.

Zustand „Gültig“

Der Widget-Zustand, in dem der Besucher Informationen korrekt eingegeben hat und das Formular abgeschickt werden kann.

Erforderlich-Zustand

Der Widget-Zustand, in dem der Besucher keinen Text eingegeben hat.

Zustand „Zeichen min.“

Der Widget-Zustand, in dem der Besucher weniger Zeichen als die Mindestanzahl im Textbereich eingegeben hat.

Zeichen max.-Zustand

Der Widget-Zustand, in dem der Benutzer im Textbereich mehr Zeichen als die Höchstanzahl zulässiger Zeichen eingegeben hat.

Wenn ein Widget „Überprüfung - Textbereich“ durch eine Benutzeraktion in einen dieser Zustände versetzt wird, wendet die Logik des Spry-Frameworks zur Laufzeit eine bestimmte CSS-Klasse auf den HTML-Container des Widgets an. Wenn der Benutzer beispielsweise ein Formular abschickt, aber keinen Text im Textbereich eingegeben hat, wendet Spry eine Klasse auf das Widget an, die zur Anzeige der Meldung „Es muss ein Wert angegeben werden“ führt. Die Regeln für Stil und Anzeige von Fehlermeldungen sind in der CSS-Regel für das Widget, hier „SpryValidationTextArea.css“, enthalten.

Das Standard-HTML für das Widget „Überprüfung - Textbereich“, normalerweise in einem Formular, enthält ein <span>-Container-Tag, das das <textarea>-Tag des Textbereichs umgibt. Das HTML für das Widget enthält außerdem Skript-Tags im Kopf des Dokuments und unterhalb des HTML-Markups des Widgets.

Eine ausführliche Erläuterung der Funktionsweise von Widgets vom Typ „Überprüfung - Textbereich“, einschließlich der vollständigen Code-Struktur, finden Sie unter www.adobe.com/go/learn_dw_sprytextarea_de.

Widget „Überprüfung - Textbereich“ einfügen und bearbeiten

Widget „Überprüfung - Textbereich“ einfügen

  1. Wählen Sie „Einfügen“ > „Spry“ > „Spry-Überprüfung - Textbereich“.
  2. Füllen Sie das Dialogfeld „Eingabehilfen-Attribute für Input-Tag“ aus und klicken Sie auf „OK“.

Hinweis:

Sie können Widgets vom Typ „Überprüfung - Textbereich“ auch über die Kategorie „Spry“ im Bedienfeld „Einfügen“ hinzufügen.

Festlegen, wann eine Überprüfung erfolgt

Sie können festlegen, wann eine Überprüfung erfolgt, z. B. wenn der Benutzer auf eine Stelle außerhalb des Widgets klickt, bei der Texteingabe oder beim Abschicken des Formulars.

  1. Wählen Sie ein Widget vom Typ „Überprüfung - Textbereich“ im Dokumentfenster aus.
  2. Wählen Sie im Eigenschafteninspektor („Fenster“ > „Eigenschaften“) unter „Überprüfen bei“ die Option für den Überprüfungszeitpunkt aus. Sie können entweder alle Optionen oder nur die Übermittlung auswählen.

    OnBlur

    Überprüfung erfolgt, wenn der Benutzer außerhalb des Textfelds klickt.

    Ändern

    Überprüfung erfolgt, wenn der Benutzer Text im Feld ändert.

    OnSubmit

    Überprüfung erfolgt, wenn der Benutzer das Formular abschickt. Die Option „onSubmit“ ist standardmäßig ausgewählt und kann nicht deaktiviert werden.

Minimale und maximale Zeichenanzahl festlegen

  1. Wählen Sie ein Widget vom Typ „Überprüfung - Textbereich“ im Dokumentfenster aus.
  2. Geben Sie im Eigenschafteninspektor („Fenster“ > „Eigenschaften“) eine Zahl ins Feld „Zeichen min.“ bzw. „Zeichen max.“ ein. Wenn Sie beispielsweise im Feld „Zeichen min.“ 20 eingeben, erfolgt nur dann eine Überprüfung, wenn der Benutzer 20 oder mehr Zeichen im Textbereich eingibt.

Zeichenzähler hinzufügen

Sie können einen Zeichenzähler hinzufügen, damit der Benutzer weiß, wie viele Zeichen er bereits eingegeben hat bzw. wie viele er noch eingeben muss. Ein solcher Zähler wird standardmäßig neben der rechten unteren Ecke des Widgets angezeigt.

  1. Wählen Sie ein Widget vom Typ „Überprüfung - Textbereich“ im Dokumentfenster aus.
  2. Wählen Sie im Eigenschafteninspektor („Fenster“ > „Eigenschaften“) die Option „Zeichenanzahl“ oder „Verbleibende Zeichen“ aus.

    Hinweis:

    Die Option „Verbleibende Zeichen“ ist nur verfügbar, wenn Sie bereits eine maximale Anzahl Zeichen festgelegt haben.

Widgetstatus in der Entwurfsansicht anzeigen

  1. Wählen Sie ein Widget vom Typ „Überprüfung - Textbereich“ im Dokumentfenster aus.
  2. Wählen Sie im Eigenschafteninspektor („Fenster“ > „Eigenschaften“) den Zustand aus, den Sie im Popupmenü „Zustandsvorschau“ anzeigen möchten. Wenn Sie beispielsweise das Widget in seinem gültigen Zustand anzeigen möchten, wählen Sie die Option „Gültig“.

Erforderlichen Status eines Textbereichs ändern

Alle Widgets vom Typ „Überprüfung - Textbereich“, die Sie mit Dreamweaver einfügen, erfordern bei der Veröffentlichung auf einer Webseite eine Benutzereingabe. Sie können die Überprüfung von Textbereichen allerdings auch als optional konfigurieren

  1. Wählen Sie ein Widget vom Typ „Überprüfung - Textbereich“ im Dokumentfenster aus.
  2. Aktivieren bzw. deaktivieren Sie im Eigenschafteninspektor („Fenster“ > „Eigenschaften“) je nach Präferenz das Kontrollkästchen „Erforderlich“.

Tipps für Textbereiche erstellen

Sie können einen Tipp zum Textbereich hinzufügen (zum Beispiel: „Beschreibung hier eingaben“), damit der Benutzer weiß, welche Informationen er eingeben muss. Der Tipp wird dann beim Laden der Seite in einen Browser im Textbereich angezeigt.

  1. Wählen Sie ein Widget vom Typ „Überprüfung - Textbereich“ im Dokumentfenster aus.
  2. Geben Sie im Eigenschafteninspektor („Fenster“ > „Eigenschaften“) im Textfeld „Tipp“ einen Tipp ein.

Zusätzliche Zeichen blockieren

Sie können verhindern, dass Benutzer mehr als die maximale erlaubte Anzahl an Zeichen in ein Widget vom Typ „Überprüfung - Textbereich“ eingeben. Wenn Sie diese Option beispielsweise für ein Widget mit einer maximalen Zeichenanzahl von 20 auswählen, kann der Benutzer auch nur so viele Zeichen in den Textbereich eingeben.

  1. Wählen Sie ein Widget vom Typ „Überprüfung - Textbereich“ im Dokumentfenster aus.
  2. Wählen Sie im Eigenschafteninspektor („Fenster“ > „Eigenschaften“) die Option „Zusätzliche Zeichen blockieren“ aus.

Widget „Überprüfung - Textbereich“ anpassen

Sie können mit dem Eigenschafteninspektor zwar einfache Änderungen an diesem Widget vornehmen, benutzerdefinierte Stilaufgaben werden allerdings nicht unterstützt. Sie können allerdings die CSS-Datei für das Widget ändern, um den gewünschten Stil zu erhalten. Eine erweiterte Liste mit Stilaufgaben finden Sie unter www.adobe.com/go/learn_dw_sprytextarea_custom_de.

Alle CSS-Regeln der folgenden Themen beziehen sich auf die Standardregeln in der Datei „SpryValidationTextArea.css“. Jedes Mal, wenn Sie ein Widget vom Typ „Überprüfung - Textbereich“ erstellen, speichert Dreamweaver die Datei „SpryValidationTextArea.css“ im Ordner „SpryAssets“ Ihrer Site. Diese Datei enthält außerdem nützliche kommentierte Informationen zu verschiedenen Stilen für das Widget.

Hinweis:

Sie können die Regeln für dieses Widget entweder schnell und einfach in der CSS-Datei oder mit dem Bedienfeld „CSS-Stile“ bearbeiten. Dieses Bedienfeld vereinfacht, speziell bei Verwendung des Modus „Aktuell“, das Auffinden der CSS-Klassen, die den verschiedenen Bereichen des Widgets zugewiesenen sind.

Fehlermeldungs-Textstil für das Widget „Überprüfung - Textbereich“

Fehlermeldungen für das Widget „Überprüfung - Textbereich“ werden in Rot mit einem 1 Pixel breiten Rahmen um den Text angezeigt.

  1. Um den Textstil für Fehlermeldungen des Widgets zu ändern, suchen Sie in der folgenden Tabelle die entsprechende CSS-Regel und ändern Sie dann die Standardeigenschaften oder fügen Sie benutzerdefinierte Eigenschaften und Werte für den Textstil hinzu:

    Zu ändernder Text

    Relevante CSS-Regel

    Relevante zu ändernde Eigenschaften

    Text der Fehlermeldung

    .textareaRequiredState .textareaRequiredMsg, .textareaMinCharsState .textareaMinCharsMsg, .textareaMaxCharsState .textareaMaxCharsMsg

    color: #CC3333; border: 1px solid #CC3333;

Hintergrundfarben des Widgets „Überprüfung - Textbereich“ ändern

  1. Um die Hintergrundfarben eines solchen Widgets zu ändern, suchen Sie in folgender Tabelle nach der richtigen CSS-Datei und ändern Sie die Standardwerte:

    Zu ändernde Hintergrundfarbe

    Relevante CSS-Regel

    Relevante zu ändernde Eigenschaft

    Hintergrundfarbe des Widgets im gültigen Zustand

    .textareaValidState textarea, textarea.textareaValidState

    background-color: #B8F5B1;

    Hintergrundfarbe des Widgets im ungültigen Zustand

    textarea.textareaRequiredState, .textareaRequiredState textarea, textarea.textareaMinCharsState, .textareaMinCharsState textarea, textarea.textareaMaxCharsState, .textareaMaxCharsState textarea

    background-color: #FF9F9F;

    Hintergrundfarbe des Widgets, wenn es den Fokus hat

    .textareaFocusState textarea, textarea.textareaFocusState

    background-color: #FFFFCC;

Dieses Werk unterliegt den Bedingungen der Creative Commons Attribution-Noncommercial-Share Alike 3.0 Unported License.  Twitter™- und Facebook-Beiträge fallen nicht unter die Bedingungen der Creative Commons-Lizenz.

Rechtliche Hinweise   |   Online-Datenschutzrichtlinie