Uso do componente TextInput

TextInput é um componente de texto de única linha que representa um invólucro do objeto nativo TextField do ActionScript. Se você precisar de um campo de texto de várias linhas, use o componente TextArea. Por exemplo, você pode usar um componente TextInput como um campo de senha em um formulário. É possível também configurar um ouvinte que verifique se o campo tem caracteres suficientes quando um usuário acessa o campo usando a tecla tab. Esse ouvinte pode exibir uma mensagem de erro indicando que o número correto de caracteres deve ser digitado.

Você pode definir o estilo textFormat usando o método setStyle() para alterar o estilo do texto que aparece em uma ocorrência de TextInput. Um componente TextInput também pode ser formatado com HTML ou como um campo de senha que mascara o texto.

Interação do usuário com o componente TextInput

Um componente TextInput pode estar ativado ou desativado em um aplicativo. No estado desativado, ele não recebe entradas de mouse nem de teclado. Quando ativado, ele segue as mesmas regras de foco, seleção e navegação que o objeto TextField do ActionScript. Quando uma ocorrência de TextInput estiver com o foco, você poderá usar as seguintes teclas para controlá-la:

Tecla

Descrição

Teclas de seta

Movem o ponto de inserção um caractere para a esquerda ou para a direita.

Shift+Tab

Move o foco para o objeto anterior.

Tabulação

Move o foco para o próximo objeto.

Para obter mais informações sobre o controle do foco, consulte a classe FocusManager na Referência do ActionScript 3.0 para Flash Professional e Trabalho com o FocusManager .

Uma visualização ao vivo de cada ocorrência de TextInput reflete as alterações feitas nos parâmetros no Inspetor de propriedades ou no Inspetor de componentes durante a criação. O texto não pode ser selecionado na visualização ao vivo, e não é possível digitar texto na ocorrência do componente no Palco.

Quando você adiciona o componente TextInput a um aplicativo, pode usar o painel Acessibilidade para torná-lo acessível aos leitores de tela.

Parâmetros do componente TextInput

Você pode definir os parâmteros de autoria a seguir para cada instância do componente TextInput no Inspetor de propriedades ou no Inspetor e componentes: editable , displayAsPassword , maxChars , restrict e text . Cada um desses parâmetros tem uma propriedade ActionScript correspondente de mesmo nome. Para obter informações sobre os possíveis valores desses parâmetros, consulte a classe TextInput na Referência do ActionScript 3.0 para Flash Professional .

Você pode programar o ActionScript de modo a controlar essas e outras opções do componente TextInput usando suas propriedades, métodos e eventos. Para obter mais informações, consulte a classe TextInput na Referência do ActionScript 3.0 para Flash Professional .

Criação de um aplicativo com o componente TextInput

O procedimento a seguir explica como adicionar um componente TextInput a um aplicativo. O exemplo usa dois campos de TextInput para receber e confirmar uma senha. Ele usa um ouvinte de eventos para verificar se um mínimo de oito caracteres foram digitados e se o texto dos dois campos são correspondentes.

  1. Crie um novo documento Flash (ActionScript 3.0).

  2. Arraste um componente Label do painel Componentes para o Palco e atribua a ele os seguintes valores no Inspetor de propriedades:

    • Digite o nome de ocorrência pwdLabel .

    • Digite um valor L igual a 100 .

    • Digite um valor X igual a 50 .

    • Digite um valor Y igual a 150 .

    • Na seção Parâmetros, digite o valor Password: para o parâmetro text.

  3. Arraste um segundo componente Label do painel Componentes para o Palco e atribua a ele os seguintes valores:

    • Digite o nome de ocorrência confirmLabel .

    • Digite um valor L igual a 100 .

    • Digite um valor X igual a 50 .

    • Digite um valor Y igual a 200 .

    • Na seção Parâmetros, digite o valor Confirm Password: para o parâmetro text.

  4. Arraste um componente TextInput do painel Componentes para o Palco e atribua a ele os seguintes valores:

    • Digite o nome de ocorrência pwdTi .

    • Digite um valor L igual a 150 .

    • Digite um valor X igual a 190 .

    • Digite um valor Y igual a 150 .

    • Na seção Parâmetros, clique duas vezes no valor do parâmetro displayAsPassword e selecione true . Isso faz com que o valor digitado no campo de texto seja mascarado com asteriscos.

  5. Arraste um segundo componente TextInput do painel Componentes para o Palco e atribua a ele os seguintes valores:

    • Digite o nome de ocorrência confirmTi .

    • Digite um valor L igual a 150 .

    • Digite um valor X igual a 190 .

    • Digite um valor Y igual a 200 .

    • Na seção Parâmetros, clique duas vezes no valor do parâmetro displayA s Password e selecione true . Isso faz com que o valor digitado no campo de texto seja mascarado com asteriscos.

  6. Abra o painel Ações, selecione Quadro 1 na Linha do tempo principal e digite o seguinte código do ActionScript: 

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

    Esse código configura um manipulador de eventos enter na ocorrência de TextInput chamada confirmTi . Se as duas senhas não forem correspondentes ou o usuário digitar menos de oito caracteres, o exemplo exibirá a mensagem: “A senha está incorreta. Digite-a novamente.” Se as senhas tiverem oito caracteres ou mais e forem correspondentes, o exemplo exibirá o valor digitado no painel Saída.

  7. Selecione Controlar > Testar filme.

Criar uma ocorrência de TextInput por meio do ActionScript

O exemplo a seguir cria um componente TextInput com o ActionScript. Ele também cria um rótulo para solicitar que um usuário digite seu nome. O exemplo define a propriedade restrict do componente para permitir somente letras maiúsculas e minúsculas, ponto e espaço. Ele também cria um objeto TextFormat usado para formatar o texto nos componentes Label e TextInput.

  1. Crie um novo documento Flash (ActionScript 3.0).

  2. Arraste o componente TextInput do painel Componentes para o painel Biblioteca.

  3. Arraste o componente Label do painel Componentes para o painel Biblioteca.

  4. Abra o painel Ações, selecione Quadro 1 na Linha do tempo principal e digite o seguinte código do ActionScript: 

    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. Selecione Controlar > Testar filme para executar o aplicativo.