Spostamento in tabella con frecce

**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...

**vitren54** · 23-12-2015, 10:17

Originariamente inviata da vic53

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.

Be ora
ciao a tutti e buone feste...

Carissimo Vic53 sono senza parole...

ho provato per semplicità il tuo primo suggerimento modificando alcune variabili dello script dinamicamente con PHP.

Il campo di input si muove controllato dalle frecce in tutte le direzioni bloccandosi quando si scontra con una lettera, lo scavalcamento (non necessario ai serpentoni) al primo input libero non avrebbe reso effetto più bello.

Quindi per me è la migliore soluzione ed è già operativa.

Alla chicca manca una piccolissima cosa per essere perfetta, durante gli spostamenti verticale compare la cronologia delle lettere digitate in ogni singola casella e disabilitarla sarebbe il massimo.

Un ringraziamento va anche lucavizzi per l'interessamento.

xVic53

per la scelta del nick hai usato il mio stesso metodo? la direbbe lunga...

**lucavizzi** · 23-12-2015, 12:49

Originariamente inviata da vic53

hello

ho provato il tuo script, ma sembra spostarsi solo con tab e shift-tab senza usare i tasti direzionali....

Buongiorno e buona antevigilia, ho ricontrollato lo script da pc ed a me funziona regolarmente sia lo spostamento con frecce che il passaggio all'input successivo in caso di inserimento di testo.
Considerato che jQuery è cross-browser, forse nel copia/incolla che hai fatto qualche riga è rimasta commentata?
Allego direttamente il file di modo che possiate testarlo.
table.zip

**vitren54** · 23-12-2015, 13:33

Originariamente inviata da lucavizzi

Buongiorno e buona antevigilia, ho ricontrollato lo script da pc ed a me funziona regolarmente sia lo spostamento con frecce che il passaggio all'input successivo in caso di inserimento di testo.
Considerato che jQuery è cross-browser, forse nel copia/incolla che hai fatto qualche riga è rimasta commentata?
Allego direttamente il file di modo che possiate testarlo.
table.zip

Ciao

ho provato anche il tuo suggerimento e come affermavi funziona (su questo non avevo dubbi) con il vantaggio di non dover agire sulla tabella (le vie dell'informatica sono infinite)... bello anche l'orientamento automatico in fase di compilazione (basso per le colonne dispari e alto per le pari).

Su una cosa ho cambiato idea, a voi avrà fatto perdere un po' di tempo, me ne sono reso conto dopo le prime prove sul metodo suggerito da vic53.

Credevo utile lo scavalcamento al primo input libero in presenza di caselle piene, sono bastate alcune prove per vedere che la casella evidenziata sbattendo sulla lettera dava una bella impressione evitando il rischio (in caso di errata digitazione o ripetizione tasto) di scrivere nel posto sbagliato.

Ultimo problema riscontrato a cui accennavo è la cronologia sulla singola casella dei tasti digitati, in internet ho trovato pulizia di cache, moduli, autocomposizione ecc a livello generale e non sulla singola cella.

Il problema è solo fastidioso... per il resto è tutto OK e non ci speravo...

**lucavizzi** · 23-12-2015, 13:55

Originariamente inviata da vitren54

Ciao

ho provato anche il tuo suggerimento e come affermavi funziona (su questo non avevo dubbi) con il vantaggio di non dover agire sulla tabella (le vie dell'informatica sono infinite)... bello anche l'orientamento automatico in fase di compilazione (basso per le colonne dispari e alto per le pari).

Su una cosa ho cambiato idea, a voi avrà fatto perdere un po' di tempo, me ne sono reso conto dopo le prime prove sul metodo suggerito da vic53.

Credevo utile lo scavalcamento al primo input libero in presenza di caselle piene, sono bastate alcune prove per vedere che la casella evidenziata sbattendo sulla lettera dava una bella impressione evitando il rischio (in caso di errata digitazione o ripetizione tasto) di scrivere nel posto sbagliato.

Ultimo problema riscontrato a cui accennavo è la cronologia sulla singola casella dei tasti digitati, in internet ho trovato pulizia di cache, moduli, autocomposizione ecc a livello generale e non sulla singola cella.

Il problema è solo fastidioso... per il resto è tutto OK e non ci speravo...

Ciao vitren,
per la cronologia della singola casella, puoi usare l'attributo "autocomplete" in questa maniera:

codice:

<input autocomplete="off">

Non so se ho capito bene, vorresti mantenere l'input anche per le lettere già digitate?

**vitren54** · 23-12-2015, 14:54

Originariamente inviata da lucavizzi

Ciao vitren,
per la cronologia della singola casella, puoi usare l'attributo "autocomplete" in questa maniera:

codice:

<input autocomplete="off">

Non so se ho capito bene, vorresti mantenere l'input anche per le lettere già digitate?

Perfetto!!! non posso chiedere di più... ed ho ottenuto più di quanto speravo.

Riguardo al tuo dubbio immagina di avere un unico schema dove tutti possono giocare.

Se vuoi fare una prova ci sono io, la mia vicina di casa l'ho già invitata, mio figlio c'è e inviterei anche vic53 (che non mi ha ancora risposto sulla questione del nick).

Facciamo per le 14:15?

c'è da scegliere un candidato a cui assegnare i punti.

Il link è questo:
http://www.renzo-vitale.it/enigmisti...4.php?sol=0237

**vic53** · 23-12-2015, 15:08

Originariamente inviata da vitren54

Perfetto!!! non posso chiedere di più... ed ho ottenuto più di quanto speravo.

Riguardo al tuo dubbio immagina di avere un unico schema dove tutti possono giocare.

Se vuoi fare una prova ci sono io, la mia vicina di casa l'ho già invitata, mio figlio c'è e inviterei anche vic53 (che non mi ha ancora risposto sulla questione del nick).

Facciamo per le 14:15?

c'è da scegliere un candidato a cui assegnare i punti.

Il link è questo:
http://www.renzo-vitale.it/enigmisti...4.php?sol=0237

ciao
ti rispondo per come ho registrato il mio nick name
Allora molti anni fa , un mio amico napoletano mi chiamava "Vicienzo.."..
siccome sono nato nel 1953 (sono antico...) è presto fatto ... vic53....
(ho lavorato nel settore informatico dal 1978 al 2008 come operatore,programmatore, analista, sistemista, supervisore...fino alla pensione per 30 anni circa ma la passione per i linguaggi c'è ancora, considera che sono stato un esperto Cobol per venti anni su quasi tutte le piattaforme esistenti al mondo)
ciao

ciao

Discussione: Spostamento in tabella con frecce

Strumenti discussione

Ricerca discussione

Visualizza

aggiornamento

Tag per questa discussione

Permessi di invio