7 days of WordPress plugins, themes & templates - for free!* Unlimited asset downloads! Start 7-Day Free Trial
Advertisement
  1. Code
  2. Web Development

Creando un teclado con CSS y jQuery

Scroll to top
Read Time: 9 mins

Spanish (Español) translation by Andrijana Mitevska (you can also view the original English article)

A veces es divertido jugar con los lenguajes de programación que conocemos y ver qué podemos crear. Pensé que sería bueno crear un pequeño teclado en línea con CSS y luego hacerlo funcionar con jQuery.  El teclado incluye teclas de "acción" (bloqueo de mayúsculas, mayúsculas y eliminación) que cambian dinámicamente el teclado cuando se hace clic en ellas. Te mostraré cómo construirlo hoy.

Paso 1: HTML y archivos básicos

Final ProductFinal ProductFinal Product

Este teclado requiere mucha configuración HTML y jugar con CSS. Cada una de las claves estará representada por un elemento de lista en una lista desordenada.  Cada uno de los elementos de la lista tendrá una clase adjunta, utilizada tanto en CSS como en jQuery. La mayoría de las clases son simplemente "letra", "último elemento" o algo similar. Esto hará que descubrir qué elemento de la lista es más fácil.

Asegúrte de haber configurado una carpeta donde quiere que vayas a utilizar este teclado. Dentro de esta nueva carpeta, crea un archivo index.html junto con una css y una carpeta js.  Finalmente, crea un archivo keyboard.js en la carpeta js y un archivo style.css en la carpeta css.

Organization of the filesOrganization of the filesOrganization of the files

Dentro del archivo HTML, incluiremos dos archivos JavaScript y un archivo CSS. Dentro de la etiqueta del cuerpo habrá una ENORME lista desordenada que contiene todas las letras, números y algunas teclas de "acción".  El HTML también tendrá un área de texto con una identificación de "teclado". Este será el lugar donde se agregarán todos los personajes. El siguiente código debe colocarse dentro del archivo index.html.

No tendrás que preocuparte demasiado por las clases en los elementos de la lista por ahora. Los explicaré más cuando usemos jQuery. Sin embargo, algunas de las clases (como desplazamiento a la derecha y lastitem) están ahí debido al CSS que usaremos.

The HTML before CSS is applied.The HTML before CSS is applied.The HTML before CSS is applied.

Paso 2: Hacer que la lista sea bonita

El JavaScript para el teclado funcionaría perfectamente sin CSS, pero no se vería como un teclado.  No voy a explicar todos los estilos porque muchos de ellos son bastante autoexplicativos, pero hay un par que repasaré. Guarda el siguiente CSS en el archivo style.css ubicado en la carpeta css.

Fíjate en los siguientes estilos porque son muy importantes.

  • .on: en algunos elementos de la lista, hay dos intervalos. Estas son las claves que tienen más de un carácter por clave; como los números.  Se ocultará el intervalo con la clase on. Esto cambió cuando un usuario hace clic en la tecla de mayúsculas, pero más sobre eso más adelante con JavaScript.
  • .lastitem - El último jey en cualquier fila tendrá su margen derecho puesto a cero para que el diseño no se rompa.
Before and after the CSS is applied.Before and after the CSS is applied.Before and after the CSS is applied.

Paso 3: Dar vida a las llaves

Si hicieras clic en un elemento de la lista, no pasaría nada. Estamos a punto de arreglar eso con un poco de jQuery.  La idea principal que usaremos es adjuntar un controlador de clic a cada uno de los elementos de la lista, tomar el texto cuando se hace clic y hacer algo de magia dependiendo de la clase del elemento de la lista. De aquí en adelante, todo el código JavaScript irá al archivo keyboard.js.

La puesta en marcha

Necesitamos abrir jQuery y definir tres variables que se usarán a través del código. Estas variables son el área de texto, un estado de cambio y un estado de bloqueo de mayúsculas.

Lo que sigue es adjuntar el controlador de clic a todos los elementos de la lista (claves). Se configuran dos variables cuando se hace clic en la tecla.  $ esto se define solo para requerir menos escritura de nosotros, y el carácter se define como el HTML del elemento de la lista. Si el elemento de la lista es una letra, no le sucederá nada a esta variable y se devolverá.

La tecla Mayús y el bloqueo de mayúsculas

Si se hace clic en la tecla de mayúsculas (listar elementos con la clase de "desplazamiento a la izquierda" o "desplazamiento a la derecha"), queremos alternar la clase "mayúscula" de cada letra. Luego, para los elementos de la lista con una clase de "símbolo", queremos alternar la visualización entre las etiquetas de tramo anidadas.  Lo que queremos hacer a continuación es establecer el cambio al valor booleano opuesto (si es verdadero, establecerlo en falso, y viceversa), y la variable de bloqueo de mayúsculas en falso, y finalmente devolver falso para no hacer nada más con la variable de carácter.

Ahora, si se hace clic en la tecla de bloqueo de mayúsculas, cambiaremos la clase "mayúscula" en los elementos de la lista de letras; establezca la variable de bloqueo de mayúsculas en verdadero; y devuelve falso.

La tecla Eliminar

Para la tecla de borrar, necesitamos asignar otra variable: html - el contenido de lo que está actualmente en el área de texto.  Una vez que tenemos eso, configuramos el nuevo HTML del área de texto para todo menos el último carácter. Esto se hace con el método substr de JavaScript. Una vez más devolvemos false para no ejecutar nada más.

The markup behind the delete key.The markup behind the delete key.The markup behind the delete key.

Caracteres especiales

Para todos los elementos de la lista que no son una letra y no son una de las teclas de "acciones", cambiamos la variable de carácter a algo especial.  Para un elemento de lista con la clase "símbolo", el carácter se establece en el contenido de cualquier intervalo que sea visible. Se utiliza (obviamente) un espacio para la barra espaciadora. El carácter de tabulación está representado por \ t, y finalmente una nueva línea (la tecla de retorno) es \ n.

The markup behind the symbol keys.The markup behind the symbol keys.The markup behind the symbol keys.

Letras mayúsculas

Si puedes recordar cuándo manejamos las teclas de mayúsculas, se agregó o eliminó una clase "mayúscula" usando la función toggleClass. Si se encuentra la clase de mayúsculas, el carácter se convierte a su forma de mayúsculas con la ayuda del método toUpperCase.

Las secuelas

En un teclado normal, normalmente solo necesitas la tecla Mayús para una letra. Si se encuentra que la variable de desplazamiento se establece en verdadera, queremos alternar la visualización de los intervalos del símbolo.  Lo que también sucede es que si la tecla de bloqueo de mayúsculas está "activada", las letras se alternan una vez más entre mayúsculas.

Para finalizar, se agrega el carácter al área de texto y el usuario puede continuar "escribiendo".

Código JavaScript final

Final ProductFinal ProductFinal Product

Conclusión

A veces es agradable jugar, incluso si el producto final no es realmente del "mundo real". Al aplicar algunas clases a los elementos de nuestra lista, pudimos crear un teclado con tecnología CSS y jQuery.  El teclado no es del todo inútil. He visto sitios web donde hay una opción para un teclado en pantalla. Pero sobre todo, esto nos permite obtener una mejor comprensión de las capacidades de CSS y jQuery.

  • Síganos en Twitter o suscríbate a la fuente RSS de NETTUTS para obtener más información y artículos sobre desarrollo web diarios.
Advertisement
Did you find this post useful?
Want a weekly email summary?
Subscribe below and we’ll send you a weekly email summary of all new Code tutorials. Never miss out on learning about the next big thing.
Advertisement
Looking for something to help kick start your next project?
Envato Market has a range of items for sale to help get you started.