[SOLUCIONADO] onkeyup en un div

#1 (**permalink**) 21/06/2016, 17:29

¿Cómo se puede gatillar una función con keyup en un div?

Eso :)

Alexis88 · #2 (**permalink**) 21/06/2016, 23:06

Si el <div> posee el atributo contenteditable con el valor booleano true, podrás registrar cualquier evento del teclado en él.

leugimsiul · #3 (**permalink**) 22/06/2016, 01:46

Cita:

Iniciado por alvaro_trewhela

¿Cómo se puede gatillar una función con keyup en un div?

Eso :)

Para dispararlo (gatillarlo) es simple:

Con vanilla js:

Código Javascript:

Ver originalvar event = new Event('keyup');
document.getElementById('id_del_div').dispatchEvent(event);

Con jQuery:

Código Javascript:

Ver original$('#id_del_div').trigger('keyup', {keyCode: ?});
//donde ? es el código de tecla que ejecuta

Como te comentan, para disparar el evento de forma natural (por la presión de una tecla), ese elemento necesita tomar el foco. Un "div" tal cual no puede tomar el foco, salvo si es contenteditable.

Saludos!

#4 (**permalink**) 22/06/2016, 08:55

Cita:

Iniciado por Alexis88

Si el <div> posee el atributo contenteditable con el valor booleano true, podrás registrar cualquier evento del teclado en él.

Cita:

Iniciado por leugimsiul

Para dispararlo (gatillarlo) es simple:

Con vanilla js:

Código Javascript:

Ver originalvar event = new Event('keyup');
document.getElementById('id_del_div').dispatchEvent(event);

Con jQuery:

Código Javascript:

Ver original$('#id_del_div').trigger('keyup', {keyCode: ?});
//donde ? es el código de tecla que ejecuta

Como te comentan, para disparar el evento de forma natural (por la presión de una tecla), ese elemento necesita tomar el foco. Un "div" tal cual no puede tomar el foco, salvo si es contenteditable.

Saludos!

gracias a ambos!!!!

#5 (**permalink**) 22/06/2016, 18:58

Hola nuevamente, sucede que todo esto es para un juego de rol... que lo voy a crear paso a pasito...

El código me anda super:

Código HTML:

Ver original<html>
    <head>
        <meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
        <title>GAME</title>
 
        <style type="text/css">
        *{
        margin:0px;
        padding:0px;
        }
        </style>
        
        <script type="text/javascript">
        
        
        function move(evt) {
        evt = evt || window.event;  
        var charCode = evt.keyCode || evt.which;
        charCode = parseInt(charCode);  
 
        if(charCode != 37 && charCode != 38 && charCode != 39 && charCode != 40){
        return 1;
        }
        
        var player = document.getElementById("player");
        
        var constant = 32;
        
        var posx = parseInt(player.style.left.replace("px", ""));
        var posy = parseInt(player.style.top.replace("px", ""));
        
        
        if(charCode == 37){ posx = posx-constant; if(posx<=0){ posx=0; }}
        else if(charCode == 38){ posy=posy-constant; if(posy <=0){ posy=0; }}
        else if(charCode == 39){ posx=posx+constant; if(posx >=constant*10){posx=constant*10; }}
        else if(charCode == 40){ posy=posy+constant; if(posy >=constant*10){posy=constant*10; }}
        else{ return 1; }
 
        player.style.left = posx+"px";
        player.style.top = posy+"px";
        player.src = "imagen/asd.png";
        }
        </script>
    
    </head>
    <body>
    
        <div onkeyup="move(event)" contenteditable="true" style="background-image:url('imagen/tierra.bmp'); margin:100px 0px 0px 100px; width:350px; height:350px; border-width:1px; border-style:solid; border-color:#000000;">
        <img src="imagen/asd.png" style="left:0px; top:0px; position:relative;" id="player" />
        </div>
    </body>
</html>

el problema son unos detalles gráficos el primer detalle es que al hacer click en el div aparece el cursor de texto:

el segundo es que al hacer click en el personaje aparece un borde negro en el, y en la esquina sup. izquierda aparecen unos cuadrados:

alguna solución?

leugimsiul · #6 (**permalink**) 23/06/2016, 01:01

Ya es cosa de css. Al div ponle "cursor: default;" y a la imagen ponle "border: 0;"

Lo de los cuadritos no tengo ni idea, parece como que te dejase redimensionar. Prueba con "resize: none;" pero vamos, como te digo, ni idea jeje.

Saludos!

#7 (**permalink**) 23/06/2016, 08:30

lo logré:

Código HTML:

Ver original<html>
        <head>
            <meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
            <title>GAME</title>
     
            <style type="text/css">
            *{
            margin:0px;
            padding:0px;
            }
            </style>
            
            <script type="text/javascript">
            
            
            function move(evt) {
            evt = evt || window.event;  
            var charCode = evt.keyCode || evt.which;
            charCode = parseInt(charCode);  
     
            if(charCode != 37 && charCode != 38 && charCode != 39 && charCode != 40){
            return 1;
            }
            
            var player = document.getElementById("player");
            
            var constant = 32;
            
            var posx = parseInt(player.style.left.replace("px", ""));
            var posy = parseInt(player.style.top.replace("px", ""));
            
            
            if(charCode == 37){ posx = posx-constant; if(posx<=0){ posx=0; }}
            else if(charCode == 38){ posy=posy-constant; if(posy <=0){ posy=0; }}
            else if(charCode == 39){ posx=posx+constant; if(posx >=constant*10){posx=constant*10; }}
            else if(charCode == 40){ posy=posy+constant; if(posy >=constant*10){posy=constant*10; }}
            else{ return 1; }
     
            player.style.left = posx+"px";
            player.style.top = posy+"px";
            player.src = "imagen/elf_d.png";
            }
            </script>
        
        </head>
        <body>
        
            <div  style="background-image:url('imagen/arena.bmp'); margin:100px 0px 0px 100px; width:350px; height:350px; border-width:1px; border-style:solid; border-color:#000000;">
            <div onkeyup="move(event);" contenteditable="true" id="player" style="color:rgba(255,255,255,0); width:32px; height:32px; background-image:url('imagen/elf_d.png'); left:0px; top:0px; position:relative;"></div>
            </div>
        </body>
    </html>

saludos!!