LinuxParty

Los teclados virtuales siguen siendo útiles en muchos escenarios: pantallas táctiles, kioscos, terminales de autoservicio, formularios especiales o proyectos donde queremos ofrecer una forma alternativa de entrada de texto sin depender del teclado físico.

En este tutorial vamos a crear un teclado virtual funcional con jQuery, manteniendo el enfoque didáctico en esta librería, pero usando una forma de trabajo más clara y actual. El objetivo será construir un teclado en pantalla que permita escribir en un campo de texto, borrar caracteres y activar mayúsculas mediante la tecla Shift.

La idea no es solo que funcione, sino que también sirva como base para ampliarlo más adelante.

En este tutorial vamos a crear un teclado virtual completamente funcional usando jQuery, ideal para:

• Formularios en pantallas táctiles
• Sistemas POS o kioscos
• Interfaces donde queremos evitar el uso del teclado físico

Aunque hoy existen alternativas modernas, jQuery sigue siendo útil para proyectos rápidos, mantenimiento de código legacy o aprendizaje práctico del DOM.

🎯 Resultado final

Al finalizar tendrás:

• Un teclado en pantalla
• Soporte para escribir en un input
• Tecla Shift
• Tecla Backspace
• Compatible con clic y pantallas táctiles

🧱 1. Estructura HTML

Primero creamos el input y el teclado:

<input type="text" id="text-input" placeholder="Escribe aquí...">

<ul id="keyboard">
    <li class="key" data-key="1">1</li>
    <li class="key" data-key="2">2</li>
    <li class="key" data-key="3">3</li>

    <li class="key" data-key="q">q</li>
    <li class="key" data-key="w">w</li>
    <li class="key" data-key="e">e</li>

    <li class="key special" data-key="shift">Shift</li>
    <li class="key" data-key="a">a</li>
    <li class="key" data-key="s">s</li>

    <li class="key special" data-key="backspace">←</li>
</ul>

👉 Usamos data-key para almacenar el valor de cada tecla (más limpio y escalable).

🎨 2. Estilos CSS básicos

#keyboard {
    list-style: none;
    padding: 0;
    max-width: 400px;
}

.key {
    display: inline-block;
    padding: 10px;
    margin: 5px;
    background: #eee;
    border-radius: 5px;
    cursor: pointer;
}

.key:hover {
    background: #ddd;
}

.special {
    background: #ccc;
}

👉 Puedes mejorar esto con Grid si quieres una distribución más profesional.

⚙️ 3. Lógica con jQuery

Incluimos jQuery actualizado:

<script src="https://code.jquery.com/jquery-3.7.1.min.js"></script>

Ahora la lógica principal:

$(function() {

    let shiftOn = false;
    const $input = $("#text-input");

    $(".key").on("click touchstart", function() {

        let key = $(this).data("key");

        // SHIFT
        if (key === "shift") {
            shiftOn = !shiftOn;
            return;
        }

        // BACKSPACE
        if (key === "backspace") {
            let current = $input.val();
            $input.val(current.slice(0, -1));
            return;
        }

        // MAYÚSCULAS
        if (shiftOn) {
            key = key.toUpperCase();
        }

        // AÑADIR TEXTO
        $input.val($input.val() + key);

    });

});

🧠 4. Explicación rápida

•  $(function(){}) → ejecuta cuando el DOM está listo
  .on("click touchstart") → funciona en PC y móviles
  data("key") → obtiene el valor de la tecla
  shiftOn → controla mayúsculas
  .val() → lee/escribe en el input
  

➕ 5. Mejoras opcionales

Puedes ampliar fácilmente:

✔ Añadir más teclas

Solo añade más <li> con data-key.

✔ Tecla Enter

<li class="key special" data-key="enter">Enter</li>

if (key === "enter") {
    alert("Enviar formulario");
    return;
}

✔ Desactivar Shift tras usarlo

if (shiftOn) {
    key = key.toUpperCase();
    shiftOn = false;
}

✔ Añadir animaciones

.key:active {
    transform: scale(0.95);
}

📱 6. Compatibilidad móvil

Gracias a:

.on("click touchstart")

👉 El teclado funciona en:

• Móviles
• Tablets
• Pantallas táctiles

⚠️ 7. Buenas prácticas con jQuery hoy

Aunque jQuery sigue siendo útil:

👉 Úsalo cuando:

• Mantienes proyectos antiguos
• Necesitas rapidez
• El entorno ya lo utiliza

👉 Evítalo cuando:

• Empiezas proyectos modernos grandes
• Usas frameworks como React o Vue

💡 Conclusión

Has creado un teclado virtual funcional con jQuery moderno, aplicando buenas prácticas actuales:

✔ Código limpio
✔ Eventos modernos (.on)
✔ Uso de data-*
✔ Compatible con móviles

Código fuente completo.

<!DOCTYPE html>
<html lang="es">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Teclado virtual con jQuery</title>

    <script src="https://code.jquery.com/jquery-3.7.1.min.js"></script>

    <style>
        body {
            font-family: Arial, sans-serif;
            background: #f4f4f4;
            margin: 0;
            padding: 30px;
        }

        .contenedor {
            max-width: 900px;
            margin: 0 auto;
            background: #ffffff;
            border-radius: 10px;
            padding: 25px;
            box-shadow: 0 2px 10px rgba(0,0,0,0.08);
        }

        h1 {
            margin-top: 0;
            color: #222;
        }

        p {
            color: #444;
            line-height: 1.6;
        }

        .zona-input {
            margin-bottom: 25px;
        }

        #text-input {
            width: 100%;
            box-sizing: border-box;
            padding: 14px;
            font-size: 18px;
            border: 1px solid #ccc;
            border-radius: 8px;
            outline: none;
        }

        #text-input:focus {
            border-color: #888;
        }

        #keyboard {
            display: flex;
            flex-direction: column;
            gap: 10px;
            user-select: none;
        }

        .fila {
            display: flex;
            flex-wrap: wrap;
            gap: 8px;
        }

        .key {
            min-width: 50px;
            padding: 12px 14px;
            text-align: center;
            background: #e9e9e9;
            border: 1px solid #cfcfcf;
            border-radius: 8px;
            cursor: pointer;
            transition: background 0.2s ease, transform 0.1s ease;
            font-size: 16px;
        }

        .key:hover {
            background: #dddddd;
        }

        .key:active {
            transform: scale(0.96);
        }

        .key.special {
            background: #d8d8d8;
            font-weight: bold;
        }

        .key.space {
            flex: 1;
        }

        .key.active-shift {
            background: #bfcde0;
            border-color: #94afd0;
        }

        .nota {
            margin-top: 20px;
            font-size: 14px;
            color: #666;
        }

        @media (max-width: 600px) {
            .key {
                min-width: 42px;
                padding: 10px 12px;
                font-size: 14px;
            }

            #text-input {
                font-size: 16px;
            }
        }
    </style>
</head>
<body>

    <div class="contenedor">
        <h1>Teclado virtual con jQuery</h1>

        <p>
            Este ejemplo muestra cómo crear un teclado virtual funcional usando jQuery.
            Podrás escribir en el campo de texto, activar mayúsculas con Shift y borrar con Backspace.
        </p>

        <div class="zona-input">
            <input type="text" id="text-input" placeholder="Escribe aquí...">
        </div>

        <div id="keyboard">
            <div class="fila">
                <div class="key" data-key="1">1</div>
                <div class="key" data-key="2">2</div>
                <div class="key" data-key="3">3</div>
                <div class="key" data-key="4">4</div>
                <div class="key" data-key="5">5</div>
                <div class="key" data-key="6">6</div>
                <div class="key" data-key="7">7</div>
                <div class="key" data-key="8">8</div>
                <div class="key" data-key="9">9</div>
                <div class="key" data-key="0">0</div>
            </div>

            <div class="fila">
                <div class="key" data-key="q">q</div>
                <div class="key" data-key="w">w</div>
                <div class="key" data-key="e">e</div>
                <div class="key" data-key="r">r</div>
                <div class="key" data-key="t">t</div>
                <div class="key" data-key="y">y</div>
                <div class="key" data-key="u">u</div>
                <div class="key" data-key="i">i</div>
                <div class="key" data-key="o">o</div>
                <div class="key" data-key="p">p</div>
            </div>

            <div class="fila">
                <div class="key" data-key="a">a</div>
                <div class="key" data-key="s">s</div>
                <div class="key" data-key="d">d</div>
                <div class="key" data-key="f">f</div>
                <div class="key" data-key="g">g</div>
                <div class="key" data-key="h">h</div>
                <div class="key" data-key="j">j</div>
                <div class="key" data-key="k">k</div>
                <div class="key" data-key="l">l</div>
                <div class="key" data-key="ñ">ñ</div>
            </div>

            <div class="fila">
                <div class="key special" data-key="shift">Shift</div>
                <div class="key" data-key="z">z</div>
                <div class="key" data-key="x">x</div>
                <div class="key" data-key="c">c</div>
                <div class="key" data-key="v">v</div>
                <div class="key" data-key="b">b</div>
                <div class="key" data-key="n">n</div>
                <div class="key" data-key="m">m</div>
                <div class="key special" data-key="backspace">⌫</div>
            </div>

            <div class="fila">
                <div class="key" data-key=".">.</div>
                <div class="key" data-key=",">,</div>
                <div class="key" data-key="-">-</div>
                <div class="key space" data-key=" ">Espacio</div>
                <div class="key special" data-key="clear">Limpiar</div>
            </div>
        </div>

        <p class="nota">
            Consejo: este ejemplo es una buena base para ampliarlo con más teclas, diseño visual avanzado o validaciones.
        </p>
    </div>

    <script>
        $(function () {
            let shiftOn = false;
            const $input = $("#text-input");
            const $shiftKey = $('.key[data-key="shift"]');

            function insertarTexto(texto) {
                $input.val($input.val() + texto);
                $input.focus();
            }

            function borrarUltimoCaracter() {
                const valorActual = $input.val();
                $input.val(valorActual.slice(0, -1));
                $input.focus();
            }

            function actualizarEstadoShift() {
                if (shiftOn) {
                    $shiftKey.addClass("active-shift");
                } else {
                    $shiftKey.removeClass("active-shift");
                }
            }

            $(".key").on("click touchstart", function (e) {
                e.preventDefault();

                let key = $(this).data("key");

                if (key === "shift") {
                    shiftOn = !shiftOn;
                    actualizarEstadoShift();
                    return;
                }

                if (key === "backspace") {
                    borrarUltimoCaracter();
                    return;
                }

                if (key === "clear") {
                    $input.val("");
                    $input.focus();
                    return;
                }

                if (typeof key === "string" && shiftOn) {
                    key = key.toUpperCase();
                }

                insertarTexto(key);

                if (shiftOn) {
                    shiftOn = false;
                    actualizarEstadoShift();
                }
            });
        });
    </script>

</body>
</html>