Arbeiten mit der TextInput-Komponente

Die TextInput-Komponente (Texteingabefeld) ist eine einzeilige Textkomponente, die das native ActionScript-Objekt „TextField“ erweitert. Wenn Sie ein Textfeld mit mehreren Zeilen benötigen, verwenden Sie die TextArea-Komponente. Sie können die TextInput-Komponente beispielsweise für ein Kennwortfeld in einem Formular verwenden. Sie können auch einen Listener einrichten, mit dem überprüft wird, ob das Feld genügend Zeichen enthält, wenn der Benutzer zum Verlassen des Felds die Tabulatortaste drückt. In diesem Fall kann der Listener beispielsweise eine Fehlermeldung anzeigen, die darauf hinweist, dass die richtige Anzahl an Zeichen in dem Feld eingegeben werden muss.

Um die Formatierung innerhalb der TextInput-Instanz zu ändern, können Sie mithilfe der Methode setStyle() die Eigenschaft textFormat ändern. Die TextInput-Komponente kann auch im HTML-Format oder als Kennwortfeld formatiert werden, in dem der Text unkenntlich dargestellt wird.

Benutzerinteraktion mit der TextInput-Komponente

TextInput-Komponenten können in einer Anwendung aktiviert und deaktiviert werden. In deaktiviertem Zustand werden Eingaben über die Maus oder die Tastatur nicht empfangen. In aktiviertem Zustand gelten für dieses Objekt dieselben Fokus-, Auswahl- und Navigationsregeln wie für das ActionScript-Objekt „TextField“. Wenn eine TextInput-Instanz den Fokus hat, können Sie diese auch mithilfe der folgenden Tasten steuern:

Schlüssel

Beschreibung

Pfeiltasten

Verschieben die Einfügemarke um je ein Zeichen nach links oder rechts.

Umschalt+Tab

Verschiebt den Fokus auf das vorherige Objekt.

Tab

Verschiebt den Fokus auf das nächste Objekt.

Weitere Informationen zum Steuern des Fokus finden Sie im Abschnitt zur FocusManager-Klasse im ActionScript 3.0 Referenzhandbuch für Flash Professional und unter Arbeiten mit dem FocusManager .

Die Änderungen an den Parametern der einzelnen TextInput-Instanzen, die beim Authoring im Eigenschaften- oder Komponenten-Inspektor vorgenommen werden, werden jeweils in einer Live-Vorschau angezeigt. Außerdem kann in der Live-Vorschau weder Text ausgewählt noch Text in der Komponenteninstanz auf der Bühne eingegeben werden.

Wenn Sie einer Anwendung die TextInput-Komponente hinzufügen, können Sie diese im Bedienfeld „Eingabehilfen“ für Bildschirmleseprogramme zugänglich machen.

Parameter der TextInput-Komponente

Die folgenden Authoring-Parameter können für jede Instanz der TextInput-Komponente im Eigenschaften- oder Komponenten-Inspektor festgelegt werden: editable , displayAsPassword , maxChars , restrict und text . Jeder dieser Parameter verfügt über eine entsprechende ActionScript-Eigenschaft mit demselben Namen. Informationen zu den möglichen Werten für diese Parameter finden Sie im Abschnitt zur TextInput-Klasse im ActionScript 3.0 Referenzhandbuch für Flash Professional .

Mithilfe von ActionScript können Sie diese und weitere Optionen für die TextInput-Komponente über ihre Eigenschaften, Methoden und Ereignisse steuern. Weitere Informationen finden Sie im Abschnitt zur TextInput-Klasse im ActionScript 3.0 Referenzhandbuch für Flash Professional .

Erstellen einer Anwendung mit der TextInput-Komponente

In der folgenden Anleitung wird erläutert, wie eine TextInput-Komponente in eine Anwendung eingefügt wird. In dem Beispiel werden zwei TextInput-Felder erstellt: eines zur Eingabe und eines zur Bestätigung eines Kennworts. Es wird ein Ereignis-Listener verwendet, der sicher stellt, dass mindestens acht Zeichen eingegeben wurden, und dass der Text für die zwei Felder übereinstimmt.

  1. Erstellen Sie ein neues Flash-Dokument (ActionScript 3.0).

  2. Ziehen Sie eine Label-Komponente vom Bedienfeld „Komponenten“ auf die Bühne und geben Sie im Eigenschafteninspektor die folgenden Werte ein:

    • Geben Sie den Instanznamen pwdLabel ein.

    • Geben Sie als Breite (B) den Wert 100 ein.

    • Geben Sie für X den Wert 50 ein.

    • Geben Sie für Y den Wert 150 ein.

    • Geben Sie auf der Registerkarte „Parameter“ für den Parameter „text“ den Wert Password: ein.

  3. Ziehen Sie eine zweite Label-Komponente aus dem Bedienfeld „Komponenten“ auf die Bühne und geben Sie die folgenden Werte ein:

    • Geben Sie den Instanznamen confirmLabel ein.

    • Geben Sie als Breite (B) den Wert 100 ein.

    • Geben Sie für X den Wert 50 ein.

    • Geben Sie für Y den Wert 200 ein.

    • Geben Sie auf der Registerkarte „Parameter“ für den Parameter „text“ den Wert Confirm Password: ein.

  4. Ziehen Sie eine TextInput-Komponente aus dem Bedienfeld „Komponenten“ auf die Bühne und geben Sie die folgenden Werte ein:

    • Geben Sie den Instanznamen pwdTi ein.

    • Geben Sie als Breite (B) den Wert 150 ein.

    • Geben Sie für X den Wert 190 ein.

    • Geben Sie für Y den Wert 150 ein.

    • Doppelklicken Sie im Bereich Parameter auf den Wert für den Parameter displayAsPassword und wählen Sie „true“ aus. Dadurch werden anstelle des eingegebenen Texts ausschließlich Sternchen angezeigt.

  5. Ziehen Sie eine zweite TextInput-Komponente aus dem Bedienfeld „Komponenten“ auf die Bühne und geben Sie die folgenden Werte ein:

    • Geben Sie den Instanznamen confirmTi ein.

    • Geben Sie als Breite (B) den Wert 150 ein.

    • Geben Sie für X den Wert 190 ein.

    • Geben Sie für Y den Wert 200 ein.

    • Doppelklicken Sie auf der Registerkarte „Parameter“ auf den Wert für den Parameter displayAsPassword und wählen Sie true aus. Dadurch werden anstelle des eingegebenen Texts ausschließlich Sternchen angezeigt.

  6. Öffnen Sie das Bedienfeld „Aktionen“, wählen Sie in der Hauptzeitleiste Bild 1 aus und geben Sie den folgenden ActionScript-Code ein: 

    function tiListener(evt_obj:Event){ 
if(confirmTi.text != pwdTi.text || confirmTi.length < 8) 
{ 
        trace("Password is incorrect. Please reenter it."); 
}  
else { 
        trace("Your password is: " + confirmTi.text); 
} 
} 
confirmTi.addEventListener("enter", tiListener);

    Mit diesem Code wird eine Ereignisprozedur enter für die TextInput-Instanz confirmTi erstellt. Wenn zwei Kennwörter nicht übereinstimmen oder der Benutzer weniger als acht Zeichen eingibt, wird im Beispiel die Meldung „Password is incorrect. Please reenter it.“ angezeigt. Wenn die Kennwörter mindestens acht Zeichen enthalten und übereinstimmen, wird im Beispiel der eingegebene Wert im Bedienfeld „Ausgabe“ angezeigt.

  7. Wählen Sie „Steuerung“ > „Film testen“.

Erstellen einer TextInput-Instanz mithilfe von ActionScript-Code

Im folgenden Beispiel wird mithilfe von ActionScript-Code eine TextInput-Komponente erstellt. Es wird zudem eine Beschriftung erstellt, die verwendet wird, um den Benutzer zur Eingabe des Namens aufzufordern. Im Beispiel wird die Eigenschaft restrict dieser Komponente festgelegt, sodass nur Großbuchstaben und Kleinbuchstaben, ein Punkt und ein Leerzeichen eingegeben werden können. Es wird auch ein TextFormat-Objekt erstellt, das zur Textformatierung sowohl in der Label- als auch in der TextInput-Komponente verwendet wird.

  1. Erstellen Sie ein neues Flash-Dokument (ActionScript 3.0).

  2. Ziehen Sie eine TextInput-Komponente aus dem Bedienfeld „Komponenten“ in das Bedienfeld „Bibliothek“.

  3. Ziehen Sie eine Label-Komponente aus dem Bedienfeld „Komponenten“ in das Bedienfeld „Bibliothek“.

  4. Öffnen Sie das Bedienfeld „Aktionen“, wählen Sie in der Hauptzeitleiste Bild 1 aus und geben Sie den folgenden ActionScript-Code ein: 

    import fl.controls.Label; 
import fl.controls.TextInput; 
 
var nameLabel:Label = new Label(); 
var nameTi:TextInput = new TextInput(); 
var tf:TextFormat = new TextFormat(); 
 
addChild(nameLabel); 
addChild(nameTi); 
 
nameTi.restrict = "A-Z .a-z"; 
 
tf.font = "Georgia"; 
tf.color = 0x0000CC; 
tf.size = 16; 
 
nameLabel.text = "Name: " ; 
nameLabel.setSize(50, 25); 
nameLabel.move(100,100); 
nameLabel.setStyle("textFormat", tf); 
nameTi.move(160, 100); 
nameTi.setSize(200, 25); 
nameTi.setStyle("textFormat", tf);

  5. Wählen Sie „Steuerung“ > „Film testen“ aus, um die Anwendung auszuführen.

Rechtliche Hinweise | Online-Datenschutzrichtlinie