Notifikationer

Markér alle som læst Log ud

rude Nybegynder

30. juli 2003 - 14:13 Der er 9 kommentarer og
1 løsning

Brug af piletaster

Jeg har en HTML tabel med 4x10 inputfelter.
Jeg vil gerne kunne bevæge mig rundt med piletasterne således at
pil ned svarer til 4 x tabulatortryk, pil op = skift+4 x tab,
venstrepil = shift+tab, højrepil til tab.

Kan man det og hvordan.

/peter

Synes godt om

bearhugx Nybegynder

30. juli 2003 - 14:29 #1

hmmm ... mon ikke man kan implementere et eller andet med keyListeners...

PS : kan ikke pt. da jeg også har travlt på arbejdet...

Synes godt om

edutasia Nybegynder

30. juli 2003 - 14:50 #2

Det kan man godt (og jeg kan senere vende tilbage til hvordan) - men har du tænkt på, at man også kan bruge piletaster til at navigere inde i et inputfelt? Jeg tror, at du vil få en konflikt - for hvad skal der ske, når brugeren f.eks. taster højre pil? Skal cursor flyttes et tegn frem i input-feltet (hvis muligt) - eller skal der "hoppes" til næste inputfelt? Hvad med at implementere det med f.eks. Shift + piletast eller Ctrl + piletast i stedet?

Synes godt om

rude Nybegynder

30. juli 2003 - 15:01 #3

Du siger noget, det havde jeg ikke lige tænkt over.
Shift eller Ctrl + piletast er fint.
Mht op og ned er der ingen konflikt da der ikke er flere linjer i felterne.

Synes godt om

edutasia Nybegynder

30. juli 2003 - 19:22 #4

Her er et fungerende eksempel - det er helt generisk, så antallet af rækker og kolonner er principielt ligegyldigt. Brug Ctrl + højre/venstre pil samt pil op/ned til at navigere:

<HTML>
<HEAD>
<TITLE>Naviger med piletaster</TITLE>
<script>
var boolCtrlDown = false;
var curField = null;

function doKeyDown() {
var elm = event.srcElement;
curField = (elm.tagName.toUpperCase() == 'INPUT' && elm.type == 'text') ? elm : null;
var kCode = event.keyCode;
var boolNoCheck = false;
switch (kCode) {
case 37: if (boolCtrlDown) navVer('previous'); break; //Ctrl + venstre pil
case 38: navHor('previous'); break; //pil op
case 39: if (boolCtrlDown) navVer('next'); break; // Ctrl + højre pil
case 40: navHor('next'); break; //pil ned
}
boolCtrlDown = (kCode == 17);
event.returnValue = false;
event.cancelBubble = true;
}

function navVer(dir) {
var elm = eval('curField.parentElement.' + dir + 'Sibling');
if (elm != null) {
elm = elm.firstChild;
if (elm != null && elm.tagName.toUpperCase() == 'INPUT' && elm.type == 'text') elm.focus();
}
}

function navHor(dir) {
var elm = eval('curField.parentElement.parentElement.' + dir + 'Sibling');
var ix = 0;
var tmpElm = curField.parentElement;
while (tmpElm.previousSibling) {
ix++;
tmpElm = tmpElm.previousSibling;
}
if (elm != null) {
elm = elm.firstChild;
if (elm != null) {
i = 0;
while (ix > i) {
if (elm.nextSibling) {
elm = elm.nextSibling;
}
else return false;
i++;
}
if (elm.firstChild != null) elm.firstChild.focus();
}
}
}

</script>
</HEAD>

<BODY onload="inputTable.rows(0).cells(0).firstChild.focus()">

<TABLE id="inputTable" onkeydown="doKeyDown()">
<TR>
<TD><input type=text size=10></TD>
<TD><input type=text size=10></TD>
<TD><input type=text size=10></TD>
<TD><input type=text size=10></TD>
</TR>
<TR>
<TD><input type=text size=10></TD>
<TD><input type=text size=10></TD>
<TD><input type=text size=10></TD>
<TD><input type=text size=10></TD>
</TR>
<TR>
<TD><input type=text size=10></TD>
<TD><input type=text size=10></TD>
<TD><input type=text size=10></TD>
<TD><input type=text size=10></TD>
</TR>
<TR>
<TD><input type=text size=10></TD>
<TD><input type=text size=10></TD>
<TD><input type=text size=10></TD>
<TD><input type=text size=10></TD>
</TR>
<TR>
<TD><input type=text size=10></TD>
<TD><input type=text size=10></TD>
<TD><input type=text size=10></TD>
<TD><input type=text size=10></TD>
</TR>
</TABLE>

</BODY>
</HTML>

Synes godt om

edutasia Nybegynder

30. juli 2003 - 19:25 #5

Du skal blot tage alt det, der står imellem <script> og </script> og indsætte det i dit eget dokument samt indsætte onkeydown="doKeyDown()"> i dit table-tag. Så burde det virke :) NB: Kun testet i MSIE 6.0...

Synes godt om

rude Nybegynder

30. juli 2003 - 22:40 #6

Foreløbigt tak. Jeg kan så oplyse at det ikke fungerer i NS7. I IE 5.5 fungerer navigeringen fint men ingen andre taster fungerer, så man kan ikke skrive noget i felterne. :(
Hvis du kan fixe det skal jeg udløse dine point, og der er 30 ekstra hvis du kan få det til at funke under NS.

Synes godt om

edutasia Nybegynder

31. juli 2003 - 11:25 #7

Jamen jeg har sq også rigtigt fået lavet ged i det :( Funktionen doKeyDown skal IKKE sætte event.returnValue = false og event.cancelBubble = true hver gang, men kun når piletasterne bruges. Den skal se sådan ud:

function doKeyDown() {
var elm = event.srcElement;
curField = (elm.tagName.toUpperCase() == 'INPUT' && elm.type == 'text') ? elm : null;
var kCode = event.keyCode;
var boolNoCheck = false;
switch (kCode) {
case 37: if (boolCtrlDown) navVer('previous'); event.returnValue = false; event.cancelBubble = true; break; //Ctrl + venstre pil
case 38: navHor('previous'); event.returnValue = false; event.cancelBubble = true; break; //pil op
case 39: if (boolCtrlDown) navVer('next'); event.returnValue = false; event.cancelBubble = true; break; // Ctrl + højre pil
case 40: navHor('next'); event.returnValue = false; event.cancelBubble = true; break; //pil ned
}
boolCtrlDown = (kCode == 17);
}

Synes godt om

edutasia Nybegynder

31. juli 2003 - 12:56 #8

Jeg har ikke lige en NS7 ved hånden til at teste, men følgende virker sandsynligvis (også) i NS7:

function doKeyDown(e) {
if (!e) var e = window.event;
if (e.keyCode) kCode = e.keyCode;
else if (e.which) kCode = e.which;
var elm;
if (e.srcElement) elm = e.srcElement;
else if (e.target) elm = e.target;
else return false;
curField = (elm.tagName.toUpperCase() == 'INPUT' && elm.type == 'text') ? elm : null;
var boolNoCheck = false;
var boolDoCancel = false;
switch (kCode) {
case 37: if (boolCtrlDown) navVer('previous'); boolDoCancel = true; break; //Ctrl + venstre pil
case 38: navHor('previous'); boolDoCancel = true; break; //pil op
case 39: if (boolCtrlDown) navVer('next'); boolDoCancel = true; break; // Ctrl + højre pil
case 40: navHor('next'); boolDoCancel = true; break; //pil ned
}
boolCtrlDown = (kCode == 17);
if (boolDoCancel) {
if (e.returnValue) e.returnValue = false;
if (e.cancelBubble) e.cancelBubble = true;
if (e.stopPropagation) e.stopPropagation();
}
}

Synes godt om

edutasia Nybegynder

31. juli 2003 - 13:40 #9

Beklager - fik lige indbygget en fejl. Her er en rettet udgave:

function doKeyDown(e) {
if (!e) var e = window.event;
if (e.keyCode) kCode = e.keyCode;
else if (e.which) kCode = e.which;
var elm;
if (e.srcElement) elm = e.srcElement;
else if (e.target) elm = e.target;
else return false;
curField = (elm.tagName.toUpperCase() == 'INPUT' && elm.type == 'text') ? elm : null;
var boolDoCancel = false;
switch (kCode) {
case 37: if (boolCtrlDown) navVer('previous'); boolDoCancel = true; break; //Ctrl + venstre pil
case 38: navHor('previous'); boolDoCancel = true; break; //pil op
case 39: if (boolCtrlDown) navVer('next'); boolDoCancel = true; break; // Ctrl + højre pil
case 40: navHor('next'); boolDoCancel = true; break; //pil ned
}
boolCtrlDown = (kCode == 17);
if (boolDoCancel) {
e.returnValue = false;
e.cancelBubble = true;
if (e.stopPropagation) e.stopPropagation();
}
}

Synes godt om

rude Nybegynder

31. juli 2003 - 14:15 #10

Fungerer nu perfekt i IE, Jeg takker ærbødigt.
Fungerer ikke i NS, så du får foreløbigt de 30.

Synes godt om

Ny bruger Nybegynder

Din løsning...

Tilladte BB-code-tags: [b]fed[/b] [i]kursiv[/i] [u]understreget[/u] Web- og emailadresser omdannes automatisk til links. Der sættes "nofollow" på alle links.

Følg dette spørgsmål

Opret Preview

Webudvikling kurser

Vi tilbyder markedets bedste kurser inden for webudvikling

Se alle Webudvikling kurser

Flere spørgsmål fra JavaScript kategorien

Titel	Indlæg	Oprettet	Seneste aktivitet
problem med download i <a href=" " download> tag i JavaScript Af Peer i JavaScript	5	27/04/202620:09	21/08/202610:41
Validering af filnavn i formular Af Strawberry i JavaScript	8	14/04/202610:11	20/04/202611:14
Mangler et JavaScript til htm side med iframe i Joomla5 Af Peder Lund Nielsen i JavaScript	2	03/02/202614:19	04/04/202616:02
Åbne en PDF fil fra en mappe Af mbl i JavaScript	9	18/04/202516:52	22/04/202512:33
Spørgsmål til cookies Af Mads i JavaScript	2	14/02/202511:47	27/06/202514:34

Se alle spørgsmål i kategorien Opret spørgsmål

Log ind eller opret profil

Hov!

For at kunne deltage på Computerworld Eksperten skal du være logget ind.

Det er heldigvis nemt at oprette en bruger: Det tager to minutter og du kan vælge at bruge enten e-mail, Facebook eller Google som login.

Du kan også logge ind via nedenstående tjenester

Alle kategorier på Eksperten

Seneste artiklerRSS