Spostamento in tabella con frecce

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

Discussione: Spostamento in tabella con frecce

Strumenti discussione

Ricerca discussione

Visualizza

Hybrid View

aggiornamento

Tag per questa discussione

Permessi di invio