Quando se esta criando um sistema, a principal preocupação é fazer um sistema que seja o mais simples e intuitivo. Uma destas simplificação esta em deixar o primeiro campo com foco para digitação e através de do teclado, com as teclas ‘tab’ e ‘enter’, ir para o próximo campo.
Então criei um exemplo simples que mostra esta interação por dois modos simples, o primeiro através de eventos do teclado, e outro através do atributo enter, existente no TextInput.
O código abaixo, é executado após a inicialização, e para o formulário form1 é adicionado um evento que é acionado a cada tecla pressionada do teclado. Quando um tecla for pressionada, a função tecla() é executada, passando como parâmetro a tecla pressionada.
Veja que o evento do teclado apenas adicionei ao formulário form1, evitando que o formulário form2 ou outros componentes fiquem trocando o foco sempre que pressionar a tecla ‘enter’.
Arquivo main.mxmlprivate function init():void
{
focusManager.setFocus(cp11);
form1.addEventListener(KeyboardEvent.KEY_DOWN, tecla);
}
private function tecla(e:KeyboardEvent):void
{
if ((e.keyCode == 13))
{
var objetoQueContemOFoco:String = getQualifiedClassName(focusManager.getFocus());
if(objetoQueContemOFoco.indexOf("TextInput") >= 0 )
{
focusManager.setFocus(focusManager.getNextFocusManagerComponent());
}
if(objetoQueContemOFoco.indexOf("Button") >= 0 )
{
clicouNoBotao();
}
}
}
Na função tecla(), é verificado se o focus esta dentro de um TextInput. A método focusManager.getFocus() retorna uma String de identificação do componente que possui o foco, e a atributo getQualifiedClassName, através desta String, retorna outra String contendo o tipo do objeto que possui este foco.
Então neste caso se o foco estiver em um TextInput e o usuário precionar a tecla ‘enter’, sera dado o foco para o próximo campo. Caso o componente que possui o foco seja um Button é executado uma ação de salvar ou editar este formulário.
O formulário form2 utilza o evento enter, do do próprio TextInput.
Arquivo main.mxml<mx:Panel x="374" y="104" title="Usando o atributo "enter"">
<mx:Form id="form2">
<mx:FormItem label="Primeiro campo:">
<mx:TextInput id="cp21" enter="{focusManager.setFocus(cp22)}"/>
</mx:FormItem>
<mx:FormItem label="Segundo campo:">
<mx:TextInput id="cp22" enter="{focusManager.setFocus(cp23)}"/>
</mx:FormItem>
<mx:FormItem label="Treceiro campo:">
<mx:TextInput id="cp23" enter="{focusManager.setFocus(cp24)}"/>
</mx:FormItem>
<mx:FormItem>
<mx:Button label="Button" id="cp24" click="clicouNoBotao()" />
</mx:FormItem>
</mx:Form>
</mx:Panel>
Veja no código acima, que ao pressionar o ‘enter’, eu chamo a função focusManager.getFocus() e defino o foco para o próximo campo. Veja que neste exemplo, quando você possuir foco no botão, não acontece nada se pressionar a tecla ‘enter’.
Já no primeiro formulário este evento é controlado pelo KeyboardEvent. Cuidado ao trabalhar com este evento, pois se não fizer algum controle como é o caso do exemplo acima, a TextArea perde o foco cada vês que é pressionado ‘enter’ dentro dele.
Gostou? Não esqueça de curtir!
Ou compartilhe o link com seus amigos
Siga-me
Eduardo parabéns por suas dicas, sempre vejo seu blog quanto tenho alguma dúvida, estou com um problema com o foco q não consigo resolver, tenho um programa em flex que ao abrir carrega um componente com o PopUpManager e preciso colocar o foco em um campo deste componente, já tentei tanto no createComplete do componente quanto do Application chamar a função e utilizar o InputMeuCampo.setFocus() ou focusManager.setFocus(InputMeuCampo) e nada, as bordas ficam como se tivesse com o foco mas o cursor não para lá, você teria alguma dica de como posso fazer isso ?
Valeu....
Flex3 ou Flex4?
Flex3.
Olá. Este problema é simples quando se trata de text imput, porém e quando no meio do formulário temos um ComboBox? Como fazer com que o Enter Funcionar para focar o proximo?
Abraço!
@Luis terás que usar o evento form1.addEventListener(KeyboardEvent.KEY_DOWN, tecla); que foi descrito no exemplo.
Olá Eduardo, estou tentando usar esse exemplo e estou recebendo esse erro:
TypeError: Error #1009: Não é possível acessar uma propriedade ou um método de uma referência de objeto nula.
at mx.managers::FocusManager/setFocus()
onde o erro é nessa linha:
focusManager.setFocus(focusManager.getNextFocusManagerComponent());
o que poderia ser?
Ola Quinhone
Em qual momento você faz este chamado.
Bom dia Eduardo
É o seguinte tenho uma aplicação que importo uma série de componentes que foram criados diretamente pela a nossa equipe, com isso foi criado um componente de pesquisa, onde tem um textInput, um Button e outro textInput, clicando no botão abre uma janela onde lista os grupos e depois de clicado, no 2º textInput será completado. O problema está em que eu queria que o foco, caso eu use o enter o foco não fosse para ele, e sim ir direto para componente seguiten. Estou usando o seguinte método:
public static function EnterNext(event:KeyboardEvent):void{
if (event.keyCode == 13) {
event.currentTarget.focusManager.setFocus(event.currentTarget.focusManager.getNextFocusManagerComponent());
event.currentTarget.focusManager.showFocus();
}
}
Como posso implementar este meu método para que isso aconteça?
Desde já agradeço.
Você pode usar assim: idDoTextinput.setFocus();
Estou tentando Tratar Focus em CSS...
Ex.: quando eu selecionar um TextInput ele trocar de cor...
Já fez isso antes? Se souber passa como é!
Vlw...
Ai terás que interagir o Focus com o AS.
<fx:Script>
<![CDATA[
protected function textinput1_focusInHandler(event:FocusEvent):void
{
textinput1.setStyle("contentBackgroundColor", 0xF0FF35);
}
protected function textinput1_focusOutHandler(event:FocusEvent):void
{
textinput1.setStyle("contentBackgroundColor", 0xFFFFFF);
}
]]>
</fx:Script>
<s:TextInput contentBackgroundColor="#FFFFFF"
id="textinput1"
focusIn="textinput1_focusInHandler(event)"
focusOut="textinput1_focusOutHandler(event)"/>