Teclado virtual HTML con monitor de entrada

Abrir en el editor Publica tu código

Recomendado

5 April 2025

<head>
    <meta charset='utf-8'>
    <meta http-equiv='X-UA-Compatible' content='IE=edge'>
    <title>Keyboard and Monitor</title>
    <meta name='viewport' content='width=device-width, initial-scale=1'>
    <link rel='stylesheet' type='text/css' media='screen' href='style.css'>
</head>

<body>
    <form class="container" name="system">
        <input type="text" name="input" class="monitor">
        <div class="keyboard" id="keyboard">
            <div class="keys">
                <input type="button" value="Q" name="Q">
                <input type="button" value="W" name="W">
                <input type="button" value="E" name="E">
                <input type="button" value="R" name="R">
                <input type="button" value="T" name="T">
                <input type="button" value="Y" name="Y">
                <input type="button" value="U" name="U">
                <input type="button" value="I" name="I">
                <input type="button" value="O" name="O">
                <input type="button" value="P" name="P">
            </div>
            <div class="keys">
                <input type="button" value="A" name="A">
                <input type="button" value="S" name="S">
                <input type="button" value="D" name="D">
                <input type="button" value="F" name="F">
                <input type="button" value="G" name="G">
                <input type="button" value="H" name="H">
                <input type="button" value="J" name="J">
                <input type="button" value="K" name="K">
                <input type="button" value="L" name="L">
            </div>
            <div class="keys">
                <input type="button" value="Z" name="Z">
                <input type="button" value="X" name="X">
                <input type="button" value="C" name="C">
                <input type="button" value="V" name="V">
                <input type="button" value="B" name="B">
                <input type="button" value="N" name="N">
                <input type="button" value="M" name="M">
                <input type="button" class="backspace" value="Backspace" name="Backspace">
            </div>
            <input type="button" class="spacebar" name="space">
        </div>
    </form>
    <script>
        document.getElementById('keyboard').addEventListener('click',function (e) {
            if(e.target.tagName === 'INPUT' && e.target.type === 'button') {
                if(e.target.classList.contains('backspace')) {
                    system.input.value = system.input.value.slice(0, -1);
                } else if(e.target.classList.contains('spacebar')) {
                    system.input.value += " ";
                } else {
                    system.input.value += e.target.value;
                }
            }
        })
    </script>
</body>

</html>

CSS

* {
    margin: 0;
    padding: 0;
    font-weight: bold;
    outline: none;
    cursor: pointer;
}

body {
    background: #a3b1c6;
    display: flex;
    height: 100vh;
    align-items: center;
    justify-content: center;
}

.container {
    width: 950px;
    display: flex;
    justify-content: center;
    align-items: center;
    height: 800px;
    position: absolute;
}

.monitor {
    height: 300px;
    width: 500px;
    background: #a3b1c6;
    border: 10px solid #a3b1c6;
    position: absolute;
    top: 5vh;
    box-shadow: 8px 8px 15px rgba(0, 0, 0, 0.3), -8px -8px 15px rgba(245, 345, 245, 0.25),
    8px 8px 15px rgba(0, 0, 0, 0.25) inset;
    border-radius: 20px;
    text-align: center;
    font-size: 30px;
}

.keyboard {
    height: 350px;
    width: 850px;
    box-shadow: 5px 5px 15px rgba(107, 188, 238, 0.3), -8px -8px 15px rgba(245, 245, 245, 0.25);
    display: flex;
    justify-content: center;
    flex-direction: column;
    align-items: center;
    padding: 10px;
    border-radius: 20px;
    position: relative;
    top: 22vh;
}

.keyboard input {
    height: 60px;
    width: 60px;
    box-shadow: 3px 3px 15px rgba(6, 106, 121, 0.3), -5px -5px 10px rgba(245, 245, 245, 0.25);
    border: 5px solid #a3b1c6;
    margin: 10px;
    border-radius: 10px;
    background:rgba(6, 120, 149, 0.81);
    font-size: 23px;
}

.keyboard input:focus{
  color: white;
  box-shadow: 5px 5px 15px rgba(110, 191, 235, 0.3), -8px -8px 15px rgba(245, 245, 245, 0.25),
  5px 5px 15px rgba(0, 0, 0, 0.25) inset;
}

.keyboard .spacebar {
    width: 300px;
}

.keyboard .backspace {
    width: 120px;
    font-size: 19px;
}

Teclado virtual HTML con monitor de entrada

Recomendado

un sitio web de plataforma

Un código de securearray494

Cómo animar el color de fondo

HTML

CSS

JS

Recomendado

un sitio web de plataforma

Un código de securearray494

Cómo animar el color de fondo

HTMLCopy

CSSCopy

JSCopy

HTML

CSS

JS