Consejo rápido pestaña automática entre campos de texto usando AS3

Esta Sugerencia rápida le mostrará cómo implementar una pestaña automática entre campos de texto. Al hacerlo, se centrará en el siguiente campo de texto definido cuando se haya introducido el número máximo de caracteres en el anterior. Vámonos!


Vista previa del resultado final

Echemos un vistazo al resultado final en el que trabajaremos:


Paso 1: Breve descripción

Se colocará una serie de TextFields en el escenario, así como un botón. Utilizando la longitud propiedad, verificaremos el número máximo de caracteres permitidos en cada campo y cambiaremos el Campo de texto activo usando el atención propiedad. El botón se ocultará de forma predeterminada y se revelará cuando todos los campos de texto estén completos.


Paso 2: configura tu archivo flash

Inicie Flash y cree un nuevo documento de Flash, establezca el tamaño del escenario en 400x200px y la velocidad de fotogramas en 24 fps.


Paso 3: Interfaz

Esta es la interfaz que usaremos, incluye tres campos de entrada de texto y un botón. Los campos de texto se nombran txt1, txt2 y txt3 De izquierda a derecha y el botón se llama okButton.

Para que el código funcione, debe establecer el Max chars opción en el Panel de propiedades de cada TextField, en este ejemplo, estos números son 3, 3 y 4, respectivamente.

Vuelva a crear la interfaz, o use la Source FLA.


Paso 4: ActionScript

Cree una nueva clase de ActionScript (Cmd + N), guarde el archivo como Main.as y empieza a escribir:

 paquete import flash.display.Sprite; import flash.events.KeyboardEvent; la clase pública Main extiende Sprite función pública Main (): void okButton.visible = false; // Oculta el okButton stage.addEventListener (KeyboardEvent.KEY_UP, checkTextField); // Escuche las pulsaciones de teclas función privada autoTab (? Textfields): void // Use el argumento de reposo para incluir cualquier número de campos de texto var txtLen: int = textfields.length; // Declara la longitud de los campos de texto utilizados para (var i: int = 0; i < txtLen; i++)  if (textfields[i].length == textfields[i].maxChars)  stage.focus = textfields[i + 1]; //Change focus to next textfield in the array  if (textfields[txtLen - 1].length == textfields[txtLen - 1].maxChars) //checks for the last textfield in the array  okButton.visible = true; //show the button    private function checkTextField(e:KeyboardEvent):void  autoTab(txt1, txt2, txt3); //executes the function every key press   

Este código verifica el número máximo de caracteres permitidos en cada campo de texto, estos campos se introducen en el autoTab funcionan como parámetros, luego el enfoque cambia si se alcanza el número máximo. Si se completa el último campo de texto en la matriz de parámetros, se muestra el botón de envío.

La linea clave es stage.focus = campos de texto [i + 1];.

De nuevo, no te olvides de configurar el Max chars opción en el Panel de propiedades del campo de texto.


Paso 5: Clase de documento

Recuerde agregar el nombre de la clase a la Clase campo en el Publicar sección de la Propiedades panel.


Conclusión

Prueba la demo y experimenta con los usos de esta característica.!

Espero que te haya gustado este tutorial, gracias por leer.!