Activar 1 botón pulsando tecla derecha del teclado

esunestudio · #1 (**permalink**) 19/02/2010, 05:07

Hola amigos, tengo un paginador montado, con el puedes moverte por la web pulsado 2 flechas <- o ->, funciona todo perfecto, pero ahora me gustaria que a parte de pinchar con el raton, se pudiera navegar con el teclado, que al pulsar la tecla derecha fuera como pulsar al boton de la flecha derecha.

He montado este codigo pero no me funciona, tengo varias lagunas

Código PHP:

  <script type="text/javascript"> 
function compruebaTecla (e) { 
var keyCode = document.all ? e.which : e.keyCode; 
  
  
  if (keyCode == 39) 
    Derecha (); 
  else if (keyCode == 37) 
    Izquierda (); 
  return true; 
} 
  
  
function Derecha () { 
elemento = document.getElementById('navi');  
    if (elemento.li class == "next")  
    {  
    elemento = true 
    }  
} 
 
function Izquierda () { 
elemento = document.getElementById('navi');  
    if (elemento.li class == "prev")  
    {  
    elemento = true 
    }  
}

EL html que hace esto es asi :

Código PHP:

  <ul id="navi"> 
   <li class="next"><a href="projects.php?id=2&p=3"></a></li> 
   <li class="prev"><a href="projects.php?id=2&p=1"></a></li>         
</ul>

maycolalvarez · #2 (**permalink**) 19/02/2010, 07:05

Código Javascript:

Ver originalfunction compruebaTecla (e) {
 
    if(e==null){
        e=event;
    }
    if(e==null){
        e=window.event;
    }
var keyCode = document.all ? e.which : e.keyCode;
  if (keyCode == 39)
    Derecha ();
  else if (keyCode == 37)
    Izquierda ();
  return true;
}

¿y en que parte llamas a compruebaTecla, ? que se supone:

<body onkeypress="compruebaTecla(event);">

esunestudio · #3 (**permalink**) 19/02/2010, 07:20

No entiendo muy bien que has hecho ahi

maycolalvarez · #4 (**permalink**) 19/02/2010, 07:29

le agregue unas lineas extra para garantizar compatibilidad con la mayoría de los navegadores, pero el echo es que: ¿en que parte de la página llamas a dicha función?

esunestudio · #5 (**permalink**) 19/02/2010, 07:34

Se supone que lo carga en todo el documento, no hace falta llamarla, el codigo original es este, y funciona perfecto

Código PHP:

  <script type="text/javascript"> 
function compruebaTecla (e) { 
var keyCode = document.all ? e.which : e.keyCode; 
  
  
  if (keyCode == 39) 
alert("flecha derecha") 
  else if (keyCode == 40) 
//alert("flecha abajo") 
MarcaCheck (); 
  else if (keyCode == 38) 
alert("flecha arriba") 
  else if (keyCode == 37) 
alert("flecha izquierda") 
  return true; 
} 
  
  
function MarcaCheck () { 
elemento = document.getElementById('obj');  
    if (elemento.type == "checkbox")  
    {  
    elemento.checked = true 
    }  
} 
  
  
window.onkeydown = compruebaTecla; 
</script>  
  
  
<form> 
<input type="checkbox" id="obj" name="obj"/> 
</form>

esunestudio · #6 (**permalink**) 19/02/2010, 07:37

En el primer post esta bien explicado, la unica duda es como hacer que pulsando la tecla derecha active : <li class="next">

Y pulsando la tecla izquierda active <li class="prev">

maycolalvarez · #7 (**permalink**) 19/02/2010, 07:53

ya lo vi XD, esa era mi duda, con respecto a:

elemento.checked = true;

no deberías aplicarle mejor el foco:

elemento.focus();

esunestudio · #8 (**permalink**) 19/02/2010, 07:58

El ultimo codigo que he puesto es el de ejemplo, eso no sirve, fijate en el 1º post, eso es lo valido, sigo con la misma duda :

como hacer que pulsando la tecla derecha active : <li class="next">

Y pulsando la tecla izquierda active <li class="prev">

maycolalvarez · #9 (**permalink**) 19/02/2010, 08:14

supongo que debe de haber unos checkbox en las listas, pero si no los muestras no lo puedo adivinar, además hay errores de sintaxis, esto no es válido:

elemento.li class == "next"

class es una palabra reservada, para saber el nombre del class css debes usar:

elemento.li.className == "next"

además elemento.li no esta definido, en ningún momento la etiqueta UL tiene la propiedad "li" que le indique que elemento está seleccionado, eso lo soportan las listas como <select></select> no esa etiqueta

si quieres que se te ayude es mejor colocar el código correcto y no esperar a que adivinemos como debería funcionar

esunestudio · #10 (**permalink**) 19/02/2010, 08:16

Ahi esta todo el codigo, no uso checkbox en ninguna parte, simplemente tengo 2 botones

Código PHP:

  <ul id="navi">  
   <li class="next"><a href="projects.php?id=2&p=3"></a></li>  
   <li class="prev"><a href="projects.php?id=2&p=1"></a></li>          
</ul>

Y el Javascript :

Código PHP:

  <script type="text/javascript">  
function compruebaTecla (e) {  
var keyCode = document.all ? e.which : e.keyCode;  
   
   
  if (keyCode == 39)  
    Derecha ();  
  else if (keyCode == 37)  
    Izquierda ();  
  return true;  
}  
   
   
function Derecha () {  
elemento = document.getElementById('navi');   
    if (elemento.li class == "next")   
    {   
    elemento = true  
    }   
}  
 
function Izquierda () {  
elemento = document.getElementById('navi');   
    if (elemento.li class == "prev")   
    {   
    elemento = true  
    }   
}

Mi duda es la misma, esta claro que hay errores de sintaxis por eso no me funciona y por eso he posteado aqui.

No hay mas codigo, simplemente eso.

maycolalvarez · #11 (**permalink**) 19/02/2010, 08:22

<a> son vínculos y no botones, revisa el código, hay errores de sintaxis, puedes comprobarlo con firebug en firefox, como dije anteriormente, los elementos UL no poseen la propiedad "li", contienen los LI pero en el arreglo childNodes y estos a su vez contendrán los <a> en sus childNodes

siento no poder ayudarte, a mi criterio el código no tiene lógica aparente

esunestudio · #12 (**permalink**) 19/02/2010, 08:29

Bien pues partimos de este codigo

Código PHP:

  <script type="text/javascript">   
function compruebaTecla (e) {   
var keyCode = document.all ? e.which : e.keyCode;   
    
    
  if (keyCode == 39)   
    Derecha ();   
  else if (keyCode == 37)   
    Izquierda ();   
  return true;   
}   
    
    
function Derecha () {   
 
    mi pregunta es que meto aqui dentro para que al pulsar la tecla derecha accione esto : <li class="next"><a href="projects.php?id=2&p=3"></a></li> 
}   
 
function Izquierda () {   
 
     
}

maycolalvarez · #13 (**permalink**) 19/02/2010, 08:33

Código PHP:

 
<script type="text/javascript">  
function compruebaTecla (e) {  
var keyCode = document.all ? e.which : e.keyCode;  
   
   
  if (keyCode == 39)  
    Derecha ();  
  else if (keyCode == 37)  
    Izquierda ();  
  return true;  
}  
   
   
function Derecha () { 
    window.location="projects.php?id=2&p=<?php echo $page+1; ?>";//eso si desde php controlas estos link
}  

function Izquierda () {  

    
}

esunestudio · #14 (**permalink**) 19/02/2010, 08:44

Perfecto, es lo que buscaba