Autor Tema: Eventos teclado JavaScript onkeypress conocer código de teclas pulsadas CU01161E (Leído 3097 veces)

bermartinv · « **en:** 22 de Febrero 2016, 11:26 »

Adjunto mi código para el ejercicio 1 de la entrega CU01161E del tutorial javascript desde cero.

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Document</title>
<style>
    #pizarra{
        border:solid 5px black;
        margin:100px;
        
        font-size: 250px;
        height:400px;
        width:400px;
        color:yellowgreen;
        text-align: center;
    }    
</style>
<script>
window.onload =function(){document.onkeypress = mostrarCodigo;
                          
   } 

function mostrarCodigo(evento){
    var caracter = String.fromCharCode(evento.which);
    var pizarra = document.getElementById("pizarra") ;
    pizarra.innerHTML = caracter;
}


</script>
</head>
<body>
   <h1>Pulsa una tecla</h1>
    <div id="pizarra"></div>
</body>
</html>

Amplío el ejercicio y añado un código para poder saber el codigo de cada caracter de teclado que pulsemos.

Código: [Seleccionar]

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Document</title>
<style>
    #pizarra{
        border:solid 5px black;
        margin:100px;
        
        font-size: 250px;
        height:400px;
        width:400px;
        color:yellowgreen;
        text-align: center;
    }    
</style>
<script>
window.onload =function(){document.onkeypress = mostrarCodigo;
                          document.onkeyup = mostrarCodigo2;
                          
   } 

function mostrarCodigo(evento){
    var caracter = (evento.which);
    var pizarra = document.getElementById("pizarra") ;
    pizarra.innerHTML = caracter;
}
    
function mostrarCodigo2(evento){
    var caracter = (evento.keyCode);
    var pizarra = document.getElementById("pizarra") ;
    pizarra.innerHTML = caracter;
}


</script>
</head>
<body>
   <h1>Pulsa una tecla</h1>
    <div id="pizarra"></div>
</body>
</html>

pedro,, · « **Respuesta #1 en:** 22 de Febrero 2016, 17:13 »

Hola bermartinv.

Veo el código perfecto.

Sobre el segundo código que propones, como curiosidad, cuando pulsas una tecla, por ejemplo la 'p', en la pizarra se muestra el código ASCII de la letra 'p' mientras tengo pulsada la tecla, y cuando suelto la tecla, muestra el código ASCII de la tecla 'P' en mayúscula.

Falta el ejercicio 2, ¿que pasó?

Saludos.

bermartinv · « **Respuesta #2 en:** 22 de Febrero 2016, 22:07 »

Ufffff, Pedro, no me había dado cuenta de ese detalle. He estado pensando y no sé como solucionarlo, creo que sucede por tener las dos eventos (onkeypress y onkeyup), actuando a la vez. Mira que curioso. Prueba este código:

Código: [Seleccionar]

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Document</title>
<style>
    #pizarra{
        border:solid 5px black;
        margin:100px;
        
        font-size: 250px;
        height:400px;
        width:400px;
        color:yellowgreen;
        text-align: center;
    }    
    #pizarra2{
        border:solid 5px black;
        margin:100px;
        
        font-size: 250px;
        height:400px;
        width:400px;
        color:yellowgreen;
        text-align: center;
    }   
</style>
<script>
window.onload =function(){document.onkeypress = mostrarCodigo;
                          document.onkeyup = mostrarCodigo2;
                          
   } 

function mostrarCodigo(evento){
    var caracter = (evento.which);
    var pizarra = document.getElementById("pizarra") ;
    pizarra.innerHTML = caracter;
}
    
function mostrarCodigo2(evento){
    var caracter = (evento.keyCode);
    var pizarra = document.getElementById("pizarra2") ;
    pizarra.innerHTML = caracter;
}


</script>
</head>
<body>
   <h1>Pulsa una tecla</h1>
    <div id="pizarra"></div>
    <div id="pizarra2"></div>
</body>
</html>

Si el segundo ejercicio, tengo esto:

Código: [Seleccionar]

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Document</title>
<style>
    #pizarra{
        margin: 200px;
        height:300px;
        width:300px;
        border:solid 5px black;
        position: absolute;
    }    
</style>
<script>
window.onload = function (){
    document.onkeyup = moverPizarra;    
}    

function moverPizarra(evento){
    var tecla = (evento.keyCode);
    var pizarra = document.getElementById("pizarra");
    var posicionY = pizarra.offsetTop;
    var posicionX = pizarra.offsetLeft;
    switch (tecla){
        case 39:pizarra.style.left=posicionX-180+'px';break;
        case 37:pizarra.style.left=posicionX-220+'px';break;
        case 38:pizarra.style.top=posicionY-220+'px';break;
        case 40:pizarra.style.top=posicionY-180+'px';break;
        default: alert ("No has pulsado una flecha de teclado");
        
    }
    
}
</script>
</head>
<body>
    <h1>Pulse una tecla</h1>
    <div id="pizarra"></div>
</body>
</html>

Foros aprenderaprogramar.com
Didáctica y divulgación de la programación

Noticias: