Teclado virtual HTML con monitor de entrada

Abrir en el editor Video Publica tu código

Recomendado

15 May 2025

Un código de alexandrestelmaszyk

HTML

<!DOCTYPE html>
<html>

<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 código de kouadioarmel055

redes sociales

Un código de alexandrestelmaszyk

HTML

CSS

JS

Recomendado

Un código de kouadioarmel055

redes sociales

Un código de alexandrestelmaszyk

HTMLCopy

CSSCopy

JSCopy

HTML

CSS

JS