focus dinamico

**emics** · 01-10-2004, 16:41

ragazzi vi chiedo un aiuto per la realizzazione di un menu (elenco di pulsanti) nel quale sia possibile navigare con le frecce e non con il tasto TAB

Sto realizzando un sito per bambini non vedenti e vorrei fargli navigare le voci del menu con le frecce e non con TAB e SHIFT TAB

riesco a catturarmi l'evento di key press e l'id del tasto premuto ma come faccio a cambiare dinamicamente il fuoco da un bottone all'altro?

vi posto il codice

codice:

<html>
<head>
          <script language="javascript" type="text/javascript"> 
          <!-- 
          var position = 0
          document.onkeydown = function keyPress(evt) 
               { 
               var keyCode = 
               document.layers ? evt.which : 
               document.all ? event.keyCode : 
               document.getElementById ? evt.keyCode : 0;
               document.f.ta.value = keyCode;
               
               
               if (keyCode == 38) 
               	{
               //     alert( 'arrow up')
               		position = position - 1
               	} 
               
               else if (keyCode == 40) 
               	{
               //     alert( 'arrow down')
               		position = position + 1
               	}
               	
               	
               document.f.tb.value = position;
               // mi conto le posizioni  ma poi????
                  document.f.position.Focus();
               // come devo fare la riga qui sopra??????????
               // come posso cambiare il focus da b1 - b2 - b3 ???
               } 
               
            function sf(){document.f.b3.focus();}
          //--> 
          </script> 

</head>
<body onLoad="sf()">
<form name="f">
<INPUT TYPE="text" VALUE="" NAME="ta">
<INPUT TYPE="text" VALUE="" NAME="tb">


<INPUT TYPE="button" NAME="b1" VALUE="Press This">

<INPUT TYPE="button" NAME="b2" VALUE="Press This">

<INPUT TYPE="button" NAME="b3" VALUE="Press This">

<INPUT TYPE="button" NAME="b4" VALUE="Press This">

</form>
</body>
</html>

Grazie a tutti

**rosamunda** · 01-10-2004, 18:11

visto che l'ho appena imparato da VAR in questo forum lo metto subito a frutto l' istruzione da inserire è:

document.f.tb.value = position;
// mi conto le posizioni ma poi????

eval("document.f.b"+position+".focus()");

// come devo fare la riga qui sopra??????????
// come posso cambiare il focus da b1 - b2 - b3 ???

occhio che ti devi gestire inizio e fine counter altrimenti la pagina da errore.

ciao

**Dennis** · 01-10-2004, 18:27

ho provato a lavorarci un po', vedi se ti va bene

<script>
var fuoco=1;
function gestisciFocus(){
alert(Event);
var keyCode = 40;
//Arrow up
if(keyCode=="38"){
if(fuoco==1){
alert("You are on the first button");
document.getElementById(1).focus();
return false;
}
fuoco++;
document.getElementById(fuoco).focus();
}
//Arrow down
if(keyCode=="40"){
if(fuoco==6){
alert("There are no buttons more

");
document.getElementById(6).focus();
return false;
}
fuoco++;
document.getElementById(fuoco).focus();
}
}

</script>
<body onLoad="document.getElementById(1).focus()" onKeyUp="gestisciFocus()">
<form name="prova">
<input type="button" id="1" value="uno" />
<input type="button" id="2" value="due" />
<input type="button" id="3" value="tre" />
<input type="button" id="4" value="quattro" />
<input type="button" id="5" value="cinque" />
<input type="button" id="6" value="sei" />
</form>

PS: non sono riuscito a beccare il keyCode (con firefox), bisogna lavorarci... se vuoi testarlo su ie, sostituisci la riga del keyCode con

keyCode=event.keyCode;

Discussione: focus dinamico

Strumenti discussione

Ricerca discussione

Visualizza

focus dinamico

Permessi di invio