Usare il componente TextInput

TextInput è un componente di testo a riga singola, wrapper dell'oggetto TextField nativo di ActionScript. Se è necessario un campo di testo multiriga, utilizzate il componente TextArea. Ad esempio, è possibile utilizzare un componente TextInput come campo password in un form. Inoltre, potete impostare un listener che verifica se nel campo è presente un numero sufficiente di caratteri quando un utente preme il tasto Tab per uscire dal campo. Tale listener potrebbe visualizzare un messaggio di errore che indica che deve essere immesso il numero di caratteri appropriato.

Per cambiare lo stile del testo visualizzato in un'istanza TextInput, potete impostare la proprietà textFormat usando il metodo setStyle() . Un componente TextInput può anche essere formattato in HTML o come un campo password che nasconde il testo.

Interazione dell'utente con il componente TextInput

In un'applicazione, un componente TextInput può essere abilitato o disabilitato. se disabilitato, non può ricevere input dal mouse o dalla tastiera. Quando è abilitato, segue le stesse regole di attivazione e di navigazione di un oggetto TextField di ActionScript. Quando un'istanza del componente TextInput è attiva, è anche possibile utilizzare i tasti seguenti per controllarla:

Chiave

Descrizione

Tasti freccia

Spostano il punto di inserimento di un carattere a sinistra o a destra.

Maiusc+Tab

Attiva l'oggetto precedente.

Tab

Attiva l'oggetto successivo.

Per ulteriori informazioni sul controllo dell'attivazione, vedete l'interfaccia FocusManager nella Guida di riferimento di ActionScript 3.0 per Flash Professional e Operazioni con FocusManager .

Nell'anteprima dal vivo di ogni istanza del componente TextInput vengono visualizzate le modifiche apportate ai parametri nella finestra di ispezione Proprietà o nella finestra di ispezione dei componenti durante la creazione. Il testo non è selezionabile nell'anteprima dal vivo e non è possibile immetterlo nell'istanza del componente sullo stage.

Quando si aggiunge un componente TextInput a un'applicazione, è possibile utilizzare il pannello Accessibilità per renderlo accessibile agli screen reader.

Parametri del componente TextInput

Potete impostare i seguenti parametri di creazione per ogni istanza del componente TextInput finestra di ispezione Proprietà o nella finestra di ispezione dei componenti: editable , displayAsPassword , maxChars , restrict e text . Ciascuno di questi parametri ha una proprietà ActionScript corrispondente con lo stesso nome. Per informazioni sui valori che potete impostare per questi parametri, vedete la classe TextInput nella Guida di riferimento di ActionScript 3.0 per Flash Professional .

È possibile creare codice ActionScript per controllare queste e altre opzioni per il componente TextInput utilizzandone le proprietà, i metodi e gli eventi. Per ulteriori informazioni, vedete la classe TextInput nella Guida di riferimento di ActionScript 3.0 per Flash Professional .

Creare un'applicazione con il componente TextInput

Nella procedura seguente viene illustrato come aggiungere un componente TextInput a un'applicazione. Nell'esempio vengono usati due campi TextInput per ricevere e confermare la password. Viene usato un listener di eventi per verificare che sia stato inserito un numero minimo di otto caratteri e che il testo dei due campi corrisponda.

  1. Create un nuovo documento Flash (ActionScript 3.0).

  2. Trascinate un componente Label dal pannello Componenti allo stage e assegnategli i seguenti valori nella finestra di ispezione Proprietà:

    • Inserite il nome di istanza pwdLabel .

    • Inserite il valore 100 per W.

    • Inserite il valore 50 per X.

    • Inserite il valore 150 per Y.

    • Nella sezione Parametri, immettete il valore Password: per il parametro text.

  3. Trascinate un secondo componente Label dal pannello Componenti allo stage e assegnategli i seguenti valori:

    • Inserite il nome di istanza confirmLabel .

    • Inserite il valore 100 per W.

    • Inserite il valore 50 per X.

    • Inserite il valore 200 per Y.

    • Nella sezione Parametri, immettete il valore Confirm Password: per il parametro text.

  4. Trascinate un componente TextInput dal pannello Componenti allo stage e assegnategli i seguenti valori:

    • Inserite il nome di istanza pwdTi .

    • Inserite il valore 150 per W.

    • Inserite il valore 190 per X.

    • Inserite il valore 150 per Y.

    • Nella sezione Parametri, fate doppio clic sul valore del parametro displayAsPassword e selezionate true . Il valore inserito nel campo di testo verrà mascherato con degli asterischi.

  5. Trascinate un secondo componente Label dal pannello Componenti allo stage e assegnategli i seguenti valori:

    • Inserite il nome di istanza confirmTi .

    • Inserite il valore 150 per W.

    • Inserite il valore 190 per X.

    • Inserite il valore 200 per Y.

    • Nella sezione Parametri, fate doppio clic sul valore del parametro displayA s Password e selezionate true . Il valore inserito nel campo di testo verrà mascherato con degli asterischi.

  6. Aprite il pannello Azioni, selezionate il fotogramma 1 nella linea temporale principale, quindi immettete il codice ActionScript seguente: 

    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);

    Questo codice imposta un gestore di eventi enter sull'istanza TextInput chiamata confirmTi . Se le due password non corrispondono o l'utente digita meno di otto caratteri, nell'esempio viene visualizzato il messaggio: "Password is incorrect. Please reenter it." Se le password sono costituite da un minimo di otto caratteri e corrispondono, nell'esempio viene visualizzato il valore inserito nel pannello Output.

  7. Selezionare Controllo > Prova filmato.

Creare un'istanza TextInput mediante ActionScript

Nell'esempio seguente viene creato un componente TextInput mediante ActionScript. Viene inoltre creato un componente Label usato per richiedere all'utente di inserire il nome. Viene impostata la proprietà restrict del componente per consentire solo lettere maiuscole e minuscole, un punto e uno spazio. Viene creato un oggetto TextFormat usato per formattare il testo nei componenti Label e TextInput.

  1. Create un nuovo documento Flash (ActionScript 3.0).

  2. Trascinate un componente TextInput dal pannello Componenti allo stage.

  3. Trascinate un componente Label dal pannello Componenti allo stage.

  4. Aprite il pannello Azioni, selezionate il fotogramma 1 nella linea temporale principale, quindi immettete il codice ActionScript seguente: 

    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. Selezionate Controllo > Prova filmato per eseguire l'applicazione.