Teclado virtual con jQuery

En este artículo vamos a ver como crear un teclado virtual sencillo utilizando principalmente el evento click disponible en la librería jQuery para capturar los clicks del ratón en las teclas del teclado. También utilizamos un poco de HTML y CSS para el aspecto visual del teclado.

En el ejemplo en funcionamiento aparece una pizarra representada mediante un textarea que no es más que el lugar donde se ven reflejadas las letras y números que se pulsan en el teclado virtual.

En la siguiente imagen lo puedes ver gráficamente:

¿Cómo puedes incorporar este teclado virtual en tu página Web?

Bien fácil. Empezaremos por añadir la librería jQuery y la captura del evento click del ratón de cada tecla del teclado en la cabecera o dentro de la etiqueta <head> de tu página Web:

<script src="https://code.jquery.com/jquery-3.2.1.js"></script>
<script>
$(document).ready(function(){
    $("#virtual-keyboard a").on('click', function() {
        if ($(this).attr('data') == 'DEL') {
            board_text = $('textarea.board').text();
            board_text = board_text.substring(0, board_text.length-1);
            $('textarea.board').text(board_text);
        } else {
            $('textarea.board').text($('textarea.board').text() + $(this).attr('data'));
        }
    });
});
</script>

Esta porción de código agrega la librería jQuery en tu página y está esperando a que alguna tecla de nuestro teclado sea pulsada mediante el click del ratón para agregar su valor en la pizarra.

Dentro del cuerpo de la página o dentro de la etiqueta <body> tenemos nuestra pizarra representada mediante un textarea vacío:

<textarea class="board"></textarea>

Y nuestro teclado a continuación:

<div id="virtual-keyboard">
    <div class="keyboard-row">
        <a class="number" href="#" data="1">1</a>
        <a class="number" href="#" data="2">2</a>
        <a class="number" href="#" data="3">3</a>
        <a class="number" href="#" data="4">4</a>
        <a class="number" href="#" data="5">5</a>
        <a class="number" href="#" data="6">6</a>
        <a class="number" href="#" data="7">7</a>
        <a class="number" href="#" data="8">8</a>
        <a class="number" href="#" data="9">9</a>
        <a class="number" href="#" data="0">0</a>
    </div>
    <div class="keyboard-row">
        <a href="#" data="Q">Q</a>
        <a href="#" data="W">W</a>
        <a href="#" data="E">E</a>
        <a href="#" data="R">R</a>
        <a href="#" data="T">T</a>
        <a href="#" data="Y">Y</a>
        <a href="#" data="U">U</a>
        <a href="#" data="I">I</a>
        <a href="#" data="O">O</a>
        <a href="#" data="P">P</a>
    </div>
    <div class="keyboard-row">
        <a href="#" data="A">A</a>
        <a href="#" data="S">S</a>
        <a href="#" data="D">D</a>
        <a href="#" data="F">F</a>
        <a href="#" data="G">G</a>
        <a href="#" data="H">H</a>
        <a href="#" data="J">J</a>
        <a href="#" data="K">K</a>
        <a href="#" data="L">L</a>
        <a href="#" data="Ñ">Ñ</a>
    </div>
    <div class="keyboard-row">
        <a href="#" data="Z">Z</a>
        <a href="#" data="X">X</a>
        <a href="#" data="C">C</a>
        <a href="#" data="V">V</a>
        <a href="#" data="B">B</a>
        <a href="#" data="N">N</a>
        <a href="#" data="M">M</a>
    </div>
    <div class="keyboard-row">
        <a href="#" data=" ">ESPACIO</a>
        <a href="#" data="DEL">ELIMINAR</a>
    </div>
</div>

Donde cada tecla es un enlace sin destino pero con un atributo data que contiene el valor de la tecla. El valor del data es lo que anotamos en la pizarra tras hacer click en una tecla.

Para cada tecla lo que hacemos es añadir su valor en la pizarra. Tenemos una tecla especial que es la de “Eliminar” que lo que haces es remover el último carácter pulsado.

Tanto el teclado como la pizarra son totalmente personalizables a través de la hoja de estilos CSS.

¿Te gustaría ayudarnos completando este teclado virtual? Envíanos tu código que permite agregar mas teclas mediante un comentario.

Ver demo Descargar

Autor
Escrito por Jose Aguilar - Experto programador Prestashop y Wordpress.
Te ha servido? Valora esta entrada!
1 estrella2 estrellas3 estrellas4 estrellas5 estrellas (No hay votos)
Cargando…
Comparte en las redes sociales

Deja un comentario

Tu dirección de correo electrónico no será publicada. Los campos obligatorios están marcados con *

Este sitio usa Akismet para reducir el spam. Aprende cómo se procesan los datos de tus comentarios.

Ver más sobre