() translation by (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
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.
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.
1 |
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "https://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
|
2 |
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en"> |
3 |
<head>
|
4 |
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" /> |
5 |
|
6 |
<title>Online Keyboard</title> |
7 |
<link rel="stylesheet" type="text/css" href="css/style.css" /> |
8 |
</head>
|
9 |
<body>
|
10 |
|
11 |
<div id="container"> |
12 |
<textarea id="write" rows="6" cols="60"></textarea> |
13 |
<ul id="keyboard"> |
14 |
<li class="symbol"><span class="off">`</span><span class="on">~</span></li> |
15 |
<li class="symbol"><span class="off">1</span><span class="on">!</span></li> |
16 |
<li class="symbol"><span class="off">2</span><span class="on">@</span></li> |
17 |
<li class="symbol"><span class="off">3</span><span class="on">#</span></li> |
18 |
<li class="symbol"><span class="off">4</span><span class="on">$</span></li> |
19 |
<li class="symbol"><span class="off">5</span><span class="on">%</span></li> |
20 |
<li class="symbol"><span class="off">6</span><span class="on">^</span></li> |
21 |
<li class="symbol"><span class="off">7</span><span class="on">&</span></li> |
22 |
<li class="symbol"><span class="off">8</span><span class="on">*</span></li> |
23 |
<li class="symbol"><span class="off">9</span><span class="on">(</span></li> |
24 |
<li class="symbol"><span class="off">0</span><span class="on">)</span></li> |
25 |
<li class="symbol"><span class="off">-</span><span class="on">_</span></li> |
26 |
<li class="symbol"><span class="off">=</span><span class="on">+</span></li> |
27 |
<li class="delete lastitem">delete</li> |
28 |
<li class="tab">tab</li> |
29 |
<li class="letter">q</li> |
30 |
<li class="letter">w</li> |
31 |
<li class="letter">e</li> |
32 |
<li class="letter">r</li> |
33 |
<li class="letter">t</li> |
34 |
<li class="letter">y</li> |
35 |
<li class="letter">u</li> |
36 |
<li class="letter">i</li> |
37 |
<li class="letter">o</li> |
38 |
<li class="letter">p</li> |
39 |
<li class="symbol"><span class="off">[</span><span class="on">{</span></li> |
40 |
<li class="symbol"><span class="off">]</span><span class="on">}</span></li> |
41 |
<li class="symbol lastitem"><span class="off">\</span><span class="on">|</span></li> |
42 |
<li class="capslock">caps lock</li> |
43 |
<li class="letter">a</li> |
44 |
<li class="letter">s</li> |
45 |
<li class="letter">d</li> |
46 |
<li class="letter">f</li> |
47 |
<li class="letter">g</li> |
48 |
<li class="letter">h</li> |
49 |
<li class="letter">j</li> |
50 |
<li class="letter">k</li> |
51 |
<li class="letter">l</li> |
52 |
<li class="symbol"><span class="off">;</span><span class="on">:</span></li> |
53 |
<li class="symbol"><span class="off">'</span><span class="on">"</span></li> |
54 |
<li class="return lastitem">return</li> |
55 |
<li class="left-shift">shift</li> |
56 |
<li class="letter">z</li> |
57 |
<li class="letter">x</li> |
58 |
<li class="letter">c</li> |
59 |
<li class="letter">v</li> |
60 |
<li class="letter">b</li> |
61 |
<li class="letter">n</li> |
62 |
<li class="letter">m</li> |
63 |
<li class="symbol"><span class="off">,</span><span class="on"><</span></li> |
64 |
<li class="symbol"><span class="off">.</span><span class="on">></span></li> |
65 |
<li class="symbol"><span class="off">/</span><span class="on">?</span></li> |
66 |
<li class="right-shift lastitem">shift</li> |
67 |
<li class="space lastitem"> </li> |
68 |
</ul>
|
69 |
</div>
|
70 |
|
71 |
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.3.2/jquery.min.js"></script> |
72 |
<script type="text/javascript" src="js/keyboard.js"></script> |
73 |
</body>
|
74 |
</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.
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.
1 |
* { |
2 |
margin: 0; |
3 |
padding: 0; |
4 |
}
|
5 |
body { |
6 |
font: 71%/1.5 Verdana, Sans-Serif; |
7 |
background: #eee; |
8 |
}
|
9 |
#container { |
10 |
margin: 100px auto; |
11 |
width: 688px; |
12 |
}
|
13 |
#write { |
14 |
margin: 0 0 5px; |
15 |
padding: 5px; |
16 |
width: 671px; |
17 |
height: 200px; |
18 |
font: 1em/1.5 Verdana, Sans-Serif; |
19 |
background: #fff; |
20 |
border: 1px solid #f9f9f9; |
21 |
-moz-border-radius: 5px; |
22 |
-webkit-border-radius: 5px; |
23 |
}
|
24 |
#keyboard { |
25 |
margin: 0; |
26 |
padding: 0; |
27 |
list-style: none; |
28 |
}
|
29 |
#keyboard li { |
30 |
float: left; |
31 |
margin: 0 5px 5px 0; |
32 |
width: 40px; |
33 |
height: 40px; |
34 |
line-height: 40px; |
35 |
text-align: center; |
36 |
background: #fff; |
37 |
border: 1px solid #f9f9f9; |
38 |
-moz-border-radius: 5px; |
39 |
-webkit-border-radius: 5px; |
40 |
}
|
41 |
.capslock, .tab, .left-shift { |
42 |
clear: left; |
43 |
}
|
44 |
#keyboard .tab, #keyboard .delete { |
45 |
width: 70px; |
46 |
}
|
47 |
#keyboard .capslock { |
48 |
width: 80px; |
49 |
}
|
50 |
#keyboard .return { |
51 |
width: 77px; |
52 |
}
|
53 |
#keyboard .left-shift { |
54 |
width: 95px; |
55 |
}
|
56 |
#keyboard .right-shift { |
57 |
width: 109px; |
58 |
}
|
59 |
.lastitem { |
60 |
margin-right: 0; |
61 |
}
|
62 |
.uppercase { |
63 |
text-transform: uppercase; |
64 |
}
|
65 |
#keyboard .space { |
66 |
clear: left; |
67 |
width: 681px; |
68 |
}
|
69 |
.on { |
70 |
display: none; |
71 |
}
|
72 |
#keyboard li:hover { |
73 |
position: relative; |
74 |
top: 1px; |
75 |
left: 1px; |
76 |
border-color: #e5e5e5; |
77 |
cursor: pointer; |
78 |
}
|
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.
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.
1 |
$(function(){
|
2 |
var $write = $('#write'),
|
3 |
shift = false, |
4 |
capslock = false; |
5 |
|
6 |
// The rest of the code goes here. |
7 |
}); |
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á.
1 |
$('#keyboard li').click(function(){
|
2 |
var $this = $(this), |
3 |
character = $this.html(); // If it's a lowercase letter, nothing happens to this variable |
4 |
|
5 |
// Code for processing the key. |
6 |
}); |
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.
1 |
// Shift keys |
2 |
if ($this.hasClass('left-shift') || $this.hasClass('right-shift')) {
|
3 |
$('.letter').toggleClass('uppercase');
|
4 |
$('.symbol span').toggle();
|
5 |
|
6 |
shift = (shift === true) ? false : true; |
7 |
capslock = false; |
8 |
return false; |
9 |
} |
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.
1 |
// Caps lock |
2 |
if ($this.hasClass('capslock')) {
|
3 |
$('.letter').toggleClass('uppercase');
|
4 |
capslock = true; |
5 |
return false; |
6 |
} |
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.
1 |
// Delete |
2 |
if ($this.hasClass('delete')) {
|
3 |
var html = $write.html(); |
4 |
|
5 |
$write.html(html.substr(0, html.length - 1)); |
6 |
return false; |
7 |
} |
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.
1 |
// Special characters |
2 |
if ($this.hasClass('symbol')) character = $('span:visible', $this).html();
|
3 |
if ($this.hasClass('space')) character = ' ';
|
4 |
if ($this.hasClass('tab')) character = "\t";
|
5 |
if ($this.hasClass('return')) character = "\n";
|
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.
1 |
// Uppercase letter |
2 |
if ($this.hasClass('uppercase')) character = character.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".
1 |
// Remove shift once a key is clicked. |
2 |
if (shift === true) {
|
3 |
$('.symbol span').toggle();
|
4 |
if (capslock === false) $('.letter').toggleClass('uppercase');
|
5 |
|
6 |
shift = false; |
7 |
} |
8 |
|
9 |
// Add the character |
10 |
$write.html($write.html() + character); |
Código JavaScript final
1 |
$(function(){
|
2 |
var $write = $('#write'),
|
3 |
shift = false, |
4 |
capslock = false; |
5 |
|
6 |
$('#keyboard li').click(function(){
|
7 |
var $this = $(this), |
8 |
character = $this.html(); // If it's a lowercase letter, nothing happens to this variable |
9 |
|
10 |
// Shift keys |
11 |
if ($this.hasClass('left-shift') || $this.hasClass('right-shift')) {
|
12 |
$('.letter').toggleClass('uppercase');
|
13 |
$('.symbol span').toggle();
|
14 |
|
15 |
shift = (shift === true) ? false : true; |
16 |
capslock = false; |
17 |
return false; |
18 |
} |
19 |
|
20 |
// Caps lock |
21 |
if ($this.hasClass('capslock')) {
|
22 |
$('.letter').toggleClass('uppercase');
|
23 |
capslock = true; |
24 |
return false; |
25 |
} |
26 |
|
27 |
// Delete |
28 |
if ($this.hasClass('delete')) {
|
29 |
var html = $write.html(); |
30 |
|
31 |
$write.html(html.substr(0, html.length - 1)); |
32 |
return false; |
33 |
} |
34 |
|
35 |
// Special characters |
36 |
if ($this.hasClass('symbol')) character = $('span:visible', $this).html();
|
37 |
if ($this.hasClass('space')) character = ' ';
|
38 |
if ($this.hasClass('tab')) character = "\t";
|
39 |
if ($this.hasClass('return')) character = "\n";
|
40 |
|
41 |
// Uppercase letter |
42 |
if ($this.hasClass('uppercase')) character = character.toUpperCase();
|
43 |
|
44 |
// Remove shift once a key is clicked. |
45 |
if (shift === true) {
|
46 |
$('.symbol span').toggle();
|
47 |
if (capslock === false) $('.letter').toggleClass('uppercase');
|
48 |
|
49 |
shift = false; |
50 |
} |
51 |
|
52 |
// Add the character |
53 |
$write.html($write.html() + character); |
54 |
}); |
55 |
}); |
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.
