Spostamento in tabella con frecce

**vitren54** · 21-12-2015, 18:58

Salve

posto in PHP, perchè la tabella l'ho generata con questo linguaggio, anche se presumo che il problema si possa risolvere con settaggi HTML o con Javascript (spostate pure nella sezione più adatta).

La tabella è formata da n1 righe e n2 colonne, ogni cella che la compone è formata a sua volta da 2 righe:

la prima in alto può contenere un numero
la seconda in basso contiene una campo di testo dove poter digitare un carattere

Al momento con il tasto TAB o shift+TAB riesco a spostarmi avanti e indietro orizzontalmente sui campi di input.

Quello che chiedo è se si può avere il completo controllo degli spostamenti usando esclusivamente le 4 frecce.

frecce.jpg

Grazie per eventuali suggerimenti.

**Alhazred** · 21-12-2015, 19:07

Sai già che non è argomento PHP, perché non chiedi direttamente in una delle altre 2 sezioni candidate?
Così hai sbagliato sicuramente, nell'altro modo avresti avuto il 50% di beccare la sezione giusta.

Ti sposto in Javascript.

**vic53** · 22-12-2015, 02:12

Originariamente inviata da Alhazred

Sai già che non è argomento PHP, perché non chiedi direttamente in una delle altre 2 sezioni candidate?
Così hai sbagliato sicuramente, nell'altro modo avresti avuto il 50% di beccare la sezione giusta.

Ti sposto in Javascript.

Ciao, ti posto un esempio di codice preso dai miei script
considera che io svolgo con ASP le righe e le colonne e in questo caso invece te le ho scritte manualmente per farti vedere il modo che uso io...

<html>
<head>
<title>TEST SPOSTAMENTO CURSORI SU CELLE DI TABELLA</title>
<script type="text/javascript" language="javascript" >
var R = 1, C = 1;
function SpostaUpDown(R, C, e) {
var code = e.keyCode ? e.keyCode : e.charCode
// alert("R="+R+" C="+C);
if (code == 38) { SetFocus(R - 1, C); }
// alert("Up");
if (code == 40) { SetFocus(R + 1, C); }
// alert("DN");
if (code == 13) {
// alert(code);
Invio(R, C, e);
}
// invio
}

function SetFocus(R, C){
if (R==0) {R=1};
if (R>3) {R=3};
//if (C==0 || C==7) {C=1};
if (C>6) {C=6};
// SalvaCursore( R, C);
document.getElementById("R"+R+"C"+C).focus();
document.getElementById("R"+R+"C"+C).select();
}

function Invio(R, C, e) {
var code = e.keyCode ? e.keyCode : e.charCode;
if (code == 13) {
//alert(code);
ElaboraDatiForm(R, C);
return true; ;
}
else {
return false;
}
}

function ElaboraDatiForm(R, C) {
alert("elaboro cella a RIGA=" + R + ", COL.=" + C);
}
function NumbersOnly(myfield, e, dec) {
var key;
var keychar;
if (window.event)
key = window.event.keyCode;
else if (e)
key = e.which;
else
return true;
keychar = String.fromCharCode(key);
// control keys
if ((key == null) || (key == 0) || (key == 8) || (key == 9) || (key == 13) || (key == 27))
return true;
// numbers
else if ((("0123456789,").indexOf(keychar) > -1))
return true;
// decimal point jump
else if (dec && (keychar == ".")) {
myfield.form.elements[dec].focus();
return true;
} else
return false;
}

function LettersOnly(myfield, e, dec) {
var key;
var keychar;

if (window.event)
key = window.event.keyCode;
else if (e)
key = e.which;
else
return true;
keychar = String.fromCharCode(key);

// control keys
if ((key == null) || (key == 0) || (key == 8) || (key == 9) || (key == 13) || (key == 27))
return true;

// numbers
else if ((("abcdefghilmnopqrstuvzwxyjkABCDEFGHILMNOPQRSTUV ZWXYK .,àèìòù&0123456789").indexOf(keychar) > -1))
return true;
else
return false;
}

</script>

<style type="text/css">

</style></head>
</head>
<body>

<table>
<tr>
<td><input class="objAttivo" type=text id="R1C1" name="R1C1" onkeypress="return NumbersOnly(this, event)" value="" size="20" onKeyDown="SpostaUpDown(1 , 1, event)" onFocus="this.style.backgroundColor='#8AF4F4'" onBlur="this.style.backgroundColor='#ffffff'" /></td>
<td><input class="objAttivo" type=text id="R1C2" name="R1C2" onkeypress="return NumbersOnly(this, event)" value="" size="20" onKeyDown="SpostaUpDown(1 , 2, event)" onFocus="this.style.backgroundColor='#8AF4F4'" onBlur="this.style.backgroundColor='#ffffff'" /></td>
<td><input class="objAttivo" type=text id="R1C3" name="R1C3" onkeypress="return NumbersOnly(this, event)" value="" size="20" onKeyDown="SpostaUpDown(1 , 3, event)" onFocus="this.style.backgroundColor='#8AF4F4'" onBlur="this.style.backgroundColor='#ffffff'" /></td>
<td><input class="objAttivo" type=text id="R1C4" name="R1C4" onkeypress="return NumbersOnly(this, event)" value="" size="20" onKeyDown="SpostaUpDown(1 , 4, event)" onFocus="this.style.backgroundColor='#8AF4F4'" onBlur="this.style.backgroundColor='#ffffff'" /></td>
<td><input class="objAttivo" type=text id="R1C5" name="R1C5" onkeypress="return NumbersOnly(this, event)" value="" size="20" onKeyDown="SpostaUpDown(1 , 5, event)" onFocus="this.style.backgroundColor='#8AF4F4'" onBlur="this.style.backgroundColor='#ffffff'" /></td>
<td><input class="objAttivo" type=text id="R1C6" name="R1C6" onkeypress="return NumbersOnly(this, event)" value="" size="20" onKeyDown="SpostaUpDown(1 , 6, event)"onFocus="this.style.backgroundColor='#8AF4F 4'" onBlur="this.style.backgroundColor='#ffffff'" /></td>
</tr>
<tr>
<td><input class="objAttivo" type=text id="R2C1" name="R2C1" onkeypress="return LettersOnly(this, event)" value="" size="20" onKeyDown="SpostaUpDown(2 , 1, event)" onFocus="this.style.backgroundColor='#8AF4F4'" onBlur="this.style.backgroundColor='#ffffff'" /></td>
<td><input class="objAttivo" type=text id="R2C2" name="R2C2" onkeypress="return LettersOnly(this, event)" value="" size="20" onKeyDown="SpostaUpDown(2 , 2, event)" onFocus="this.style.backgroundColor='#8AF4F4'" onBlur="this.style.backgroundColor='#ffffff'" /></td>
<td><input class="objAttivo" type=text id="R2C3" name="R2C3" onkeypress="return LettersOnly(this, event)" value="" size="20" onKeyDown="SpostaUpDown(2 , 3, event)" onFocus="this.style.backgroundColor='#8AF4F4'" onBlur="this.style.backgroundColor='#ffffff'" /></td>
<td><input class="objAttivo" type=text id="R2C4" name="R2C4" onkeypress="return LettersOnly(this, event)" value="" size="20" onKeyDown="SpostaUpDown(2 , 4, event)" onFocus="this.style.backgroundColor='#8AF4F4'" onBlur="this.style.backgroundColor='#ffffff'" /></td>
<td><input class="objAttivo" type=text id="R2C5" name="R2C5" onkeypress="return LettersOnly(this, event)" value="" size="20" onKeyDown="SpostaUpDown(2 , 5, event)" onFocus="this.style.backgroundColor='#8AF4F4'" onBlur="this.style.backgroundColor='#ffffff'" /></td>
<td><input class="objAttivo" type=text id="R2C6" name="R2C6" onkeypress="return LettersOnly(this, event)" value="" size="20" onKeyDown="SpostaUpDown(2 , 6, event)" onFocus="this.style.backgroundColor='#8AF4F4'" onBlur="this.style.backgroundColor='#ffffff'" /></td>
</tr>
<tr>
<td><input class="objAttivo" type=text id="R3C1" name="R3C1" value="" size="20" onKeyDown="SpostaUpDown(3 , 1, event)" onFocus="this.style.backgroundColor='#8AF4F4'" onBlur="this.style.backgroundColor='#ffffff'" /></td>
<td><input class="objAttivo" type=text id="R3C2" name="R3C2" value="" size="20" onKeyDown="SpostaUpDown(3 , 2, event)" onFocus="this.style.backgroundColor='#8AF4F4'" onBlur="this.style.backgroundColor='#ffffff'" /></td>
<td><input class="objAttivo" type=text id="R3C3" name="R3C3" value="" size="20" onKeyDown="SpostaUpDown(3 , 3, event)" onFocus="this.style.backgroundColor='#8AF4F4'" onBlur="this.style.backgroundColor='#ffffff'" /></td>
<td><input class="objAttivo" type=text id="R3C4" name="R3C4" value="" size="20" onKeyDown="SpostaUpDown(3 , 4, event)" onFocus="this.style.backgroundColor='#8AF4F4'" onBlur="this.style.backgroundColor='#ffffff'" /></td>
<td><input class="objAttivo" type=text id="R3C5" name="R3C5" value="" size="20" onKeyDown="SpostaUpDown(3 , 5, event)" onFocus="this.style.backgroundColor='#8AF4F4'" onBlur="this.style.backgroundColor='#ffffff'" /></td>
<td><input class="objAttivo" type=text id="R3C6" name="R3C6" value="" size="20" onKeyDown="SpostaUpDown(3 , 6, event)" onFocus="this.style.backgroundColor='#8AF4F4'" onBlur="this.style.backgroundColor='#ffffff'" /></td>
</tr>
</table>
</body>

</html>

copia in un file html e provalo...

ciao

**vitren54** · 22-12-2015, 11:25

Originariamente inviata da vic53

Ciao, ti posto un esempio di codice preso dai miei script
considera che io svolgo con ASP le righe e le colonne e in questo caso invece te le ho scritte manualmente per farti vedere il modo che uso io...

copia in un file html e provalo...

ciao

Ciao ti ringrazio tantissimo

l'esempio funziona ed una buona base da adattare al mio problema,

purtroppo nel presentarlo (e nella sezione sbagliata per giunta...) ho dimenticato di specificare alcuni dettagli importanti.

La tabella è dinamica (9 righe per un numero di colonne che varia da 6 a 24).
Lo spostamento deve avvenire solo tra caselle libere, una volta digitata la lettera al ripresentarsi dello schema la lettera viene evidenziata (stampata) nella cella ma non come campo di input.

In ordine potrei ma la vedo dura:

1) capire bene l'esempio

ho provato al volo a gestire lo spostamento orizzontale (inserendo i codici 37 e 39 nella funzione SpostaUpDown) ma chiaramente non basta, farò altri tentativi.

2) scrivere dinamicamente la sezione javascript da php... che conosce la dislocazione delle caselle libere.

Nel mio caso sarebbe una vera chicca...

**vic53** · 22-12-2015, 14:13

Originariamente inviata da vitren54

Ciao ti ringrazio tantissimo

l'esempio funziona ed una buona base da adattare al mio problema,

purtroppo nel presentarlo (e nella sezione sbagliata per giunta...) ho dimenticato di specificare alcuni dettagli importanti.

La tabella è dinamica (9 righe per un numero di colonne che varia da 6 a 24).
Lo spostamento deve avvenire solo tra caselle libere, una volta digitata la lettera al ripresentarsi dello schema la lettera viene evidenziata (stampata) nella cella ma non come campo di input.

In ordine potrei ma la vedo dura:

1) capire bene l'esempio

ho provato al volo a gestire lo spostamento orizzontale (inserendo i codici 37 e 39 nella funzione SpostaUpDown) ma chiaramente non basta, farò altri tentativi.

2) scrivere dinamicamente la sezione javascript da php... che conosce la dislocazione delle caselle libere.

Nel mio caso sarebbe una vera chicca...

ciao

si puo fare ma bisogna scrivere jscript dinamico...
io lo potrei fare ma sono piu ferrato in ASP dove sviluppo applicazioni per clienti e amici in ASP vbscript e jscript + jquery...
pero' anche con javascript puoi usare la creazione di html dinamico lato client....
se mi dici le specifiche e ho tempo provo a sviluppare un modello come dici.
per bypassare le caselle occupate ti suggerisco di usare la function onFocus e testare se diversa da blank per saltare alla cella successiva... (C=C+1 con test fine riga con R=R+1) questo porterebbe il cursore a spostarsi sulle celle libere come ti serve ...pero bisogna studiarci su e fare le prove.
bye

**vitren54** · 22-12-2015, 15:07

Originariamente inviata da vic53

ciao

si puo fare ma bisogna scrivere jscript dinamico...
io lo potrei fare ma sono piu ferrato in ASP dove sviluppo applicazioni per clienti e amici in ASP vbscript e jscript + jquery...
pero' anche con javascript puoi usare la creazione di html dinamico lato client....
se mi dici le specifiche e ho tempo provo a sviluppare un modello come dici.
per bypassare le caselle occupate ti suggerisco di usare la function onFocus e testare se diversa da blank per saltare alla cella successiva... (C=C+1 con test fine riga con R=R+1) questo porterebbe il cursore a spostarsi sulle celle libere come ti serve ...pero bisogna studiarci su e fare le prove.
bye

Ciao

la tabella viene generata in php e quindi vedrei bene (ma posso sbagliarmi) l'integrazione con javascript, uno pensa a crearla con i dati opportuni e l'altro a gestire gli spostamenti.

Nel loop php nidificato righe/colonne attribuirei ad ogni cella una classe, l'id, nome ed evento scrivendo da parte una sezione javascript che operi le opportune azioni.

L'aspetto degli spostamenti che non crea problemi ad es. sui tablet è stato sottovalutato per i pc e risulta essere scomodo e fastidioso.

dell'applicazione ne avevo parlato e operativamente, in un mese, molte cose sono cambiate:

http://forum.html.it/forum/showthread.php?threadid=2932440

**lucavizzi** · 22-12-2015, 21:48

Propongo una soluzione alternativa che ho implementato a scopo ricreativo.
Potete copiare ed incollare il codice per provarlo.
All'apertura la pagina posizionerà il focus sul primo input.
E' possibile muoversi tra gli input usando i tasti freccia, il focus passerà all'input successivo anche se le celle non sono adiacenti, i "buchi" (celle senza input) saranno saltati.
Arrivati all'ultimo input della riga, o della colonna, il focus sarà portato sul primo input della riga, o della colonna, un po' come nei video-games.
Digitando una lettera in un input, il focus verrà spostato all'input successivo.
E' possibile impostare un input "successivo" per mezzo del data-attribute "next".
La tabella "demo" segue un andamento a serpentone: scende dalla prima colonna per poi risalire dalla seconda.
Ovviamente è possibile controllare la "direzione" degli inserimenti agendo sui data-next.
Come potete vedere la tabella non contiene alcun "referenziamento" per le celle: nessuna classe o id, e nessun evento inline. Write less, do more...
Mi piacerebbe conoscere le vostre impressioni.
Un saluto e buone feste.

codice:

<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>Parole crociate</title>
<script src="http://ajax.googleapis.com/ajax/libs...n.js"></script>
<script type="text/javascript">
$(function(){
 $('input:first').focus();
 $('input').keyup(function(event){
  var input=$(event.target);
  var last=$('tr:first td').length;
  var row=input.parents('tr');
  var rows=$('tr').length;
  var index=input.parent().index();
  var row_index=input.parents('tr').index();
  if(event.which==37 || event.which==39){//left, right
   for(var i=0; i<last; i++){
    if(event.which==37){//left
     index--;
     if(index<0) index=last-1;
    }else{//right
     index++;
     if(index>last) index=0;
    }
    if($('td:eq('+index+') input',row).length==1){
     $('td:eq('+index+') input',row).focus();
     break;
    }
   }
  }else if(event.which==38 || event.which==40){//top, bottom
   for(var i=0; i<rows; i++){
    if(event.which==38){//top
     row_index--;
     if(row_index<0) row_index=rows-1;
    }else{//bottom
     row_index++;
     if(row_index>rows-1) row_index=0;
    }
    if($('tr:eq('+row_index+') td:eq('+index+') input').length==1){
     $('tr:eq('+row_index+') td:eq('+index+') input').focus();
     break;
    }
   }
  }else{
   if(event.which!=46 && event.which!=8){//esclude canc e del
    var e = jQuery.Event("keyup");
    switch(input.data('next')){
     case 'top':  e.which=38; break;
     case 'right': e.which=39; break;
     case 'bottom': e.which=40; break;
     case 'left':  e.which=37; break;
    }
    input.trigger(e);
   }
  }
 });
});
</script>
<style type="text/css">
table{
 border-collapse:collapse;
}
td{
 border:1px solid #666;
 width:33px;
 height:33px;
 text-align:right;
 vertical-align:top;
 position:relative;
 padding:4px;
 font-size:9px;
}
td input{
 position:absolute;
 width:98%;
 left:1%; bottom:1%;
 box-sizing:border-box;
 border:1px solid #ccc;
 border-radius:4px;
}
input:focus{
 background:#ffffcc;
 box-shadow:0px 0px 5px #ffd700;
}
</style>
</head>
<body>
<table>
 <tr>
    <td>1<input data-next="bottom"></td><td>2<input data-next="right"></td><td>3<input data-next="bottom"></td><td>4</td><td>5</td><td>6</td><td>7</td><td>8</td><td>9</td><td>10</td>
   </tr>
 <tr>
    <td>1<input data-next="bottom"></td><td>2<input data-next="top"></td><td>3<input data-next="bottom"></td><td>4</td><td>5</td><td>6</td><td>7</td><td>8</td><td>9</td><td>10</td>
   </tr>
 <tr>
    <td>1<input data-next="bottom"></td><td>2<input data-next="top"></td><td>3<input data-next="bottom"></td><td>4</td><td>5</td><td>6</td><td>7</td><td>8</td><td>9</td><td>10</td>
   </tr>
 <tr>
    <td>1<input data-next="bottom"></td><td>2</td><td>3<input data-next="bottom"></td><td>4</td><td>5</td><td>6</td><td>7</td><td>8</td><td>9</td><td>10</td>
   </tr>
 <tr>
    <td>1<input data-next="bottom"></td><td>2<input data-next="top"></td><td>3<input data-next="bottom"></td><td>4</td><td>5</td><td>6</td><td>7</td><td>8</td><td>9</td><td>10</td>
   </tr>
 <tr>
    <td>1</td><td>2<input data-next="top"></td><td>3</td><td>4</td><td>5</td><td>6</td><td>7</td><td>8</td><td>9</td><td>10</td>
   </tr>
 <tr>
    <td>1<input data-next="bottom"></td><td>2<input data-next="top"></td><td>3</td><td>4</td><td>5</td><td>6</td><td>7</td><td>8</td><td>9</td><td>10</td>
   </tr>
 <tr>
    <td>1</td><td>2<input data-next="top"></td><td>3<input data-next="bottom"></td><td>4<input></td><td>5</td><td>6</td><td>7</td><td>8</td><td>9</td><td>10</td>
   </tr>
 <tr>
    <td>1<input data-next="right"></td><td>2<input data-next="top"></td><td>3<input data-next="right"></td><td>4<input data-next="top"></td><td>5</td><td>6</td><td>7</td><td>8</td><td>9</td><td>10</td>
   </tr>
</table>
</body>
</html>

**vic53** · 22-12-2015, 23:59

Originariamente inviata da lucavizzi

Propongo una soluzione alternativa che ho implementato a scopo ricreativo.
Potete copiare ed incollare il codice per provarlo.
All'apertura la pagina posizionerà il focus sul primo input.
E' possibile muoversi tra gli input usando i tasti freccia, il focus passerà all'input successivo anche se le celle non sono adiacenti, i "buchi" (celle senza input) saranno saltati.
Arrivati all'ultimo input della riga, o della colonna, il focus sarà portato sul primo input della riga, o della colonna, un po' come nei video-games.
Digitando una lettera in un input, il focus verrà spostato all'input successivo.
E' possibile impostare un input "successivo" per mezzo del data-attribute "next".
La tabella "demo" segue un andamento a serpentone: scende dalla prima colonna per poi risalire dalla seconda.
Ovviamente è possibile controllare la "direzione" degli inserimenti agendo sui data-next.
Come potete vedere la tabella non contiene alcun "referenziamento" per le celle: nessuna classe o id, e nessun evento inline. Write less, do more...
Mi piacerebbe conoscere le vostre impressioni.
Un saluto e buone feste.

codice:

<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>Parole crociate</title>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script type="text/javascript">
$(function(){
 $('input:first').focus();
 $('input').keyup(function(event){
  var input=$(event.target);
  var last=$('tr:first td').length;
  var row=input.parents('tr');
  var rows=$('tr').length;
  var index=input.parent().index();
  var row_index=input.parents('tr').index();
  if(event.which==37 || event.which==39){//left, right
   for(var i=0; i<last; i++){
    if(event.which==37){//left
     index--;
     if(index<0) index=last-1;
    }else{//right
     index++;
     if(index>last) index=0;
    }
    if($('td:eq('+index+') input',row).length==1){
     $('td:eq('+index+') input',row).focus();
     break;
    }
   }
  }else if(event.which==38 || event.which==40){//top, bottom
   for(var i=0; i<rows; i++){
    if(event.which==38){//top
     row_index--;
     if(row_index<0) row_index=rows-1;
    }else{//bottom
     row_index++;
     if(row_index>rows-1) row_index=0;
    }
    if($('tr:eq('+row_index+') td:eq('+index+') input').length==1){
     $('tr:eq('+row_index+') td:eq('+index+') input').focus();
     break;
    }
   }
  }else{
   if(event.which!=46 && event.which!=8){//esclude canc e del
    var e = jQuery.Event("keyup");
    switch(input.data('next')){
     case 'top':  e.which=38; break;
     case 'right': e.which=39; break;
     case 'bottom': e.which=40; break;
     case 'left':  e.which=37; break;
    }
    input.trigger(e);
   }
  }
 });
});
</script>
<style type="text/css">
table{
 border-collapse:collapse;
}
td{
 border:1px solid #666;
 width:33px;
 height:33px;
 text-align:right;
 vertical-align:top;
 position:relative;
 padding:4px;
 font-size:9px;
}
td input{
 position:absolute;
 width:98%;
 left:1%; bottom:1%;
 box-sizing:border-box;
 border:1px solid #ccc;
 border-radius:4px;
}
input:focus{
 background:#ffffcc;
 box-shadow:0px 0px 5px #ffd700;
}
</style>
</head>
<body>
<table>
 <tr>
    <td>1<input data-next="bottom"></td><td>2<input data-next="right"></td><td>3<input data-next="bottom"></td><td>4</td><td>5</td><td>6</td><td>7</td><td>8</td><td>9</td><td>10</td>
   </tr>
 <tr>
    <td>1<input data-next="bottom"></td><td>2<input data-next="top"></td><td>3<input data-next="bottom"></td><td>4</td><td>5</td><td>6</td><td>7</td><td>8</td><td>9</td><td>10</td>
   </tr>
 <tr>
    <td>1<input data-next="bottom"></td><td>2<input data-next="top"></td><td>3<input data-next="bottom"></td><td>4</td><td>5</td><td>6</td><td>7</td><td>8</td><td>9</td><td>10</td>
   </tr>
 <tr>
    <td>1<input data-next="bottom"></td><td>2</td><td>3<input data-next="bottom"></td><td>4</td><td>5</td><td>6</td><td>7</td><td>8</td><td>9</td><td>10</td>
   </tr>
 <tr>
    <td>1<input data-next="bottom"></td><td>2<input data-next="top"></td><td>3<input data-next="bottom"></td><td>4</td><td>5</td><td>6</td><td>7</td><td>8</td><td>9</td><td>10</td>
   </tr>
 <tr>
    <td>1</td><td>2<input data-next="top"></td><td>3</td><td>4</td><td>5</td><td>6</td><td>7</td><td>8</td><td>9</td><td>10</td>
   </tr>
 <tr>
    <td>1<input data-next="bottom"></td><td>2<input data-next="top"></td><td>3</td><td>4</td><td>5</td><td>6</td><td>7</td><td>8</td><td>9</td><td>10</td>
   </tr>
 <tr>
    <td>1</td><td>2<input data-next="top"></td><td>3<input data-next="bottom"></td><td>4<input></td><td>5</td><td>6</td><td>7</td><td>8</td><td>9</td><td>10</td>
   </tr>
 <tr>
    <td>1<input data-next="right"></td><td>2<input data-next="top"></td><td>3<input data-next="right"></td><td>4<input data-next="top"></td><td>5</td><td>6</td><td>7</td><td>8</td><td>9</td><td>10</td>
   </tr>
</table>
</body>
</html>

hello

ho provato il tuo script, ma sembra spostarsi solo con tab e shift-tab senza usare i tasti direzionali....
mi pare che non sia la cosa che ha chiesto il nostro amico...
Aveva chiesto di saltare le caselle piene cioe scritte con input e usare i tasti direzionali in tutte le direzioni o sbaglio...
La cosa da implementare era che se scrivi un carattere in una cella questo fa si che il focus si sposti nella cella successiva se è libera altrimenti sulla prossima cella libera successiva e mi pare di capire seguendo l'andamento orizzontale da sinistra a destra...
ciao

**lucavizzi** · 23-12-2015, 00:11

Originariamente inviata da vic53

hello

ho provato il tuo script, ma sembra spostarsi solo con tab e shift-tab senza usare i tasti direzionali....
mi pare che non sia la cosa che ha chiesto il nostro amico...
Aveva chiesto di saltare le caselle piene cioe scritte con input e usare i tasti direzionali in tutte le direzioni o sbaglio...
La cosa da implementare era che se scrivi un carattere in una cella questo fa si che il focus si sposti nella cella successiva se è libera altrimenti sulla prossima cella libera successiva e mi pare di capire seguendo l'andamento orizzontale da sinistra a destra...
ciao

Ciao Vic,
Nei miei test il focus si spostava con i tasti freccia, forse ho fatto qualche errore nel copia/incolla... Controllerò domani da pc...

**vic53** · 23-12-2015, 02:12

Originariamente inviata da lucavizzi

Ciao Vic,
Nei miei test il focus si spostava con i tasti freccia, forse ho fatto qualche errore nel copia/incolla... Controllerò domani da pc...

ciao
intanto posto un file un po piu affinato alla funzione per le frecce
controllo verso l'alto, verso il basso ,verso sinistra e verso destra saltando le caselle occupate
però ci deve lavorare ancora su... anche se comincia a funzionare presenta delle cose da risolvere...
se la cella è scritta, il fatto di non poterci piu andare sopra ti impedisce di cancellarla.

<html>
<head>
<title>TEST SPOSTAMENTO CURSORI SU TABELLA </title>
<script type="text/javascript" language="javascript" >
var R = 1, C = 1;
var nrows = 9, ncells = 24;
function SpostaUpDown(R, C, e) {
var code = e.keyCode ? e.keyCode : e.charCode
// avanza a sinistra fino alla prima libera
if (code == 37) {
C = C - 1;
SetFocus(R, C);
VerificaCellaSinistra(R, C);
}
// alert("right");
if (code == 39) {
C = C + 1;
SetFocus(R, C);
VerificaCellaDestra(R, C);
}
//
if (code == 38) {
R = R - 1;
SetFocus(R, C);
VerificaCellaAlto(R, C);
}
if (code == 40) {
R = R + 1;
SetFocus(R, C);
VerificaCellaBasso(R, C);
}

if (code == 13) {
// alert(code);
Invio(R, C, e);
}
// invio
}
function VerificaCellaSinistra(R, C) {
do
if (document.getElementById("R" + R + "C" + C).value != "") {
C = C - 1;
SetFocus(R, C);
}
while (document.getElementById("R" + R + "C" + C).value != "");
}
function VerificaCellaDestra(R, C) {
do
if (document.getElementById("R" + R + "C" + C).value != "") {
C = C + 1;
SetFocus(R, C);
}
while (document.getElementById("R" + R + "C" + C).value != "");
}
function VerificaCellaAlto(R, C) {
do
if (document.getElementById("R" + R + "C" + C).value != "") {
R = R - 1;
SetFocus(R, C);
}
while (document.getElementById("R" + R + "C" + C).value != "");
}
function VerificaCellaBasso(R, C) {
do
if (document.getElementById("R" + R + "C" + C).value != "") {
R = R + 1;
SetFocus(R, C);
}
while (document.getElementById("R" + R + "C" + C).value != "");
}

function SetFocus(R, C) {
// alert("call to setfocus "+R+" "+C);
if (R == 0) {
R = 1;
// C=1;
}
if (R > nrows) {R = nrows;}
//if (C==0 || C==7) {C=1};
if (C > ncells) {
C = 1;
R = R + 1;
if (R > nrows) {R = nrows; }
}
// SalvaCursore( R, C);
document.getElementById("R" + R + "C" + C).focus();
// document.getElementById("R"+R+"C"+C).select();
}

function Invio(R, C, e) {
var code = e.keyCode ? e.keyCode : e.charCode;
if (code == 13) {
ElaboraDatiForm(R, C);
return true; ;
}
else {
return false;
}
}

function ElaboraDatiForm(R, C) {
alert("elaboro cella a RIGA=" + R + ", COL.=" + C);
bckMainPage();
}
function NumbersOnly(myfield, e, dec) {
var key;
var keychar;
if (window.event)
key = window.event.keyCode;
else if (e)
key = e.which;
else
return true;
keychar = String.fromCharCode(key);
// control keys
if ((key == null) || (key == 0) || (key == 8) || (key == 9) || (key == 13) || (key == 27))
return true;
// numbers
else
if ((("0123456789,").indexOf(keychar) > -1))
return true;
else
return false;
}

function LettersOnly(myfield, e, dec) {
var key;
var keychar;

if (window.event)
key = window.event.keyCode;
else if (e)
key = e.which;
else
return true;
keychar = String.fromCharCode(key);
// alert("code=" + keychar+"-"+key);
// control keys
if ((key == null) || (key == 0) || (key == 8) || (key == 9) || (key == 13) || (key == 27))
return true;
// numbers
else if ((("abcdefghilmnopqrstuvzwxyjkABCDEFGHILMNOPQRSTUV ZWXYK .,àèìòù&0123456789").indexOf(keychar) > -1))
return true;
else
return false;
}
function CellaPiena(R, C) {
if (document.getElementById("R" + R + "C" + C).value != "") {
// skip to next cell
// document.getElementById("R" + R + "C" + C).setAttribute("background-Color", "#FFFFFF");
SetFocus(R, C + 1);
}
// document.getElementById("R" + R + "C" + C).setAttribute("background-Color", "#8AF4F4");
}
</script>

<style type="text/css">

</style></head>
</head>
<body>
<table>
<script language="javascript" type="text/javascript">
for (var R = 1; R < nrows + 1; R++) {
document.write("<tr>");
for (var C = 1; C < ncells + 1; C++) {
document.write("<td><div style='width:24px; height:30px;float:right;font-size: 6px;background-color: #cccccc;'><label>R" + R + "C" + C);
document.write("<input type=text size=1 maxlength=1 value='' onkeypress='return LettersOnly(this, event)' onKeyDown='SpostaUpDown(" + R + "," + C + ", event)' ");
document.write(" id='R" + R + "C" + C + "' name='R" + R + "C" + C + "'");
document.write(" style='text-align:center;' onfocus='CellaPiena(" + R + "," + C + ")' />");
document.write("</div></td>");
}
document.write("</tr>");
}
</script>
</table>
</body>
</html>

Be ora
ciao a tutti e buone feste...

Discussione: Spostamento in tabella con frecce

Strumenti discussione

Ricerca discussione

Visualizza

Hybrid View

Spostamento in tabella con frecce

Esempio di spostamento su tabella campi in righe e colonne fatto con jscript

...varie

aggiornamento

Tag per questa discussione

Permessi di invio