Foros del Web » Programando para Internet » Javascript »

[SOLUCIONADO] onkeyup en un div

Estas en el tema de onkeyup en un div en el foro de Javascript en Foros del Web. ¿Cómo se puede gatillar una función con keyup en un div? Eso :)...
  #1 (permalink)  
Antiguo 21/06/2016, 17:29
alvaro_trewhela
Invitado
 
Mensajes: n/a
Puntos:
onkeyup en un div

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

Eso :)
  #2 (permalink)  
Antiguo 21/06/2016, 23:06
Avatar de Alexis88
Philosopher
 
Fecha de Ingreso: noviembre-2011
Ubicación: Tacna, Perú
Mensajes: 5.551
Antigüedad: 12 años, 4 meses
Puntos: 977
Respuesta: onkeyup en un div

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

__________________
«Juro por mi vida y mi amor por ella, que jamás viviré para el provecho de otro hombre, ni le pediré a otro hombre que viva para el mío».

Ayn Rand
  #3 (permalink)  
Antiguo 22/06/2016, 01:46
 
Fecha de Ingreso: mayo-2014
Mensajes: 44
Antigüedad: 9 años, 10 meses
Puntos: 10
Respuesta: onkeyup en un div

Cita:
Iniciado por alvaro_trewhela Ver Mensaje
¿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 original
  1. var event = new Event('keyup');
  2. document.getElementById('id_del_div').dispatchEvent(event);

Con jQuery:
Código Javascript:
Ver original
  1. $('#id_del_div').trigger('keyup', {keyCode: ?});
  2. //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)  
Antiguo 22/06/2016, 08:55
alvaro_trewhela
Invitado
 
Mensajes: n/a
Puntos:
Respuesta: onkeyup en un div

Cita:
Iniciado por Alexis88 Ver Mensaje
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 Ver Mensaje
Para dispararlo (gatillarlo) es simple:

Con vanilla js:
Código Javascript:
Ver original
  1. var event = new Event('keyup');
  2. document.getElementById('id_del_div').dispatchEvent(event);

Con jQuery:
Código Javascript:
Ver original
  1. $('#id_del_div').trigger('keyup', {keyCode: ?});
  2. //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)  
Antiguo 22/06/2016, 18:58
alvaro_trewhela
Invitado
 
Mensajes: n/a
Puntos:
Respuesta: onkeyup en un div

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
  1.     <head>
  2.         <meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
  3.         <title>GAME</title>
  4.  
  5.         <style type="text/css">
  6.         *{
  7.         margin:0px;
  8.         padding:0px;
  9.         }
  10.         </style>
  11.        
  12.         <script type="text/javascript">
  13.        
  14.        
  15.         function move(evt) {
  16.         evt = evt || window.event; 
  17.         var charCode = evt.keyCode || evt.which;
  18.         charCode = parseInt(charCode); 
  19.  
  20.         if(charCode != 37 && charCode != 38 && charCode != 39 && charCode != 40){
  21.         return 1;
  22.         }
  23.        
  24.         var player = document.getElementById("player");
  25.        
  26.         var constant = 32;
  27.        
  28.         var posx = parseInt(player.style.left.replace("px", ""));
  29.         var posy = parseInt(player.style.top.replace("px", ""));
  30.        
  31.        
  32.         if(charCode == 37){ posx = posx-constant; if(posx<=0){ posx=0; }}
  33.         else if(charCode == 38){ posy=posy-constant; if(posy <=0){ posy=0; }}
  34.         else if(charCode == 39){ posx=posx+constant; if(posx >=constant*10){posx=constant*10; }}
  35.         else if(charCode == 40){ posy=posy+constant; if(posy >=constant*10){posy=constant*10; }}
  36.         else{ return 1; }
  37.  
  38.         player.style.left = posx+"px";
  39.         player.style.top = posy+"px";
  40.         player.src = "imagen/asd.png";
  41.         }
  42.         </script>
  43.    
  44.     </head>
  45.     <body>
  46.    
  47.         <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;">
  48.         <img src="imagen/asd.png" style="left:0px; top:0px; position:relative;" id="player" />
  49.         </div>
  50.     </body>
  51. </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?

Última edición por alvaro_trewhela; 22/06/2016 a las 19:05
  #6 (permalink)  
Antiguo 23/06/2016, 01:01
 
Fecha de Ingreso: mayo-2014
Mensajes: 44
Antigüedad: 9 años, 10 meses
Puntos: 10
Respuesta: onkeyup en un div

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)  
Antiguo 23/06/2016, 08:30
alvaro_trewhela
Invitado
 
Mensajes: n/a
Puntos:
Respuesta: onkeyup en un div

lo logré:

Código HTML:
Ver original
  1.         <head>
  2.             <meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
  3.             <title>GAME</title>
  4.      
  5.             <style type="text/css">
  6.             *{
  7.             margin:0px;
  8.             padding:0px;
  9.             }
  10.             </style>
  11.            
  12.             <script type="text/javascript">
  13.            
  14.            
  15.             function move(evt) {
  16.             evt = evt || window.event;  
  17.             var charCode = evt.keyCode || evt.which;
  18.             charCode = parseInt(charCode);  
  19.      
  20.             if(charCode != 37 && charCode != 38 && charCode != 39 && charCode != 40){
  21.            return 1;
  22.             }
  23.            
  24.             var player = document.getElementById("player");
  25.            
  26.             var constant = 32;
  27.            
  28.             var posx = parseInt(player.style.left.replace("px", ""));
  29.             var posy = parseInt(player.style.top.replace("px", ""));
  30.            
  31.            
  32.             if(charCode == 37){ posx = posx-constant; if(posx<=0){ posx=0; }}
  33.            else if(charCode == 38){ posy=posy-constant; if(posy <=0){ posy=0; }}
  34.            else if(charCode == 39){ posx=posx+constant; if(posx >=constant*10){posx=constant*10; }}
  35.             else if(charCode == 40){ posy=posy+constant; if(posy >=constant*10){posy=constant*10; }}
  36.             else{ return 1; }
  37.      
  38.             player.style.left = posx+"px";
  39.             player.style.top = posy+"px";
  40.             player.src = "imagen/elf_d.png";
  41.             }
  42.             </script>
  43.        
  44.         </head>
  45.         <body>
  46.        
  47.             <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;">
  48.             <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>
  49.             </div>
  50.         </body>
  51.     </html>

saludos!!

Última edición por alvaro_trewhela; 23/06/2016 a las 08:46

Etiquetas: onkeyup
Atención: Estás leyendo un tema que no tiene actividad desde hace más de 6 MESES, te recomendamos abrir un Nuevo tema en lugar de responder al actual.
Respuesta




La zona horaria es GMT -6. Ahora son las 03:29.