[javascript] 2D navigeren in een formulier

[marty]

Dit is wat ik graag wil gaan maken:

Een functie die er voor zorgt dat je met de pijltjes toetsen (of eventueel andere toetsen) tussen de input tags van een form kunt skippen (dus 2D alle richtingen op).

Waarom? Ik heb een aantal formulieren die bestaan uit redelijk wat kolommen, waarbij in sommige gevallen vaak alleen de 2e kolom maar moet worden ingevuld. Het is erg irritant om dan 7x op de tab te moeten drukken (en weer shift+tab als je te ver gaat), of 7x de muis te pakken). Sommige formulieren moeten namelijk nogal vaak achter elkaar worden ingevuld.

Maargoed, hoe dit aan te pakken? Ik ben niet zo'n javascripter en weet veel meer van php en kwam er gisteren achter dat je in javascript bijvoorbeeld alleen maar getallen als key mag gebruiken in je arrays (of vergis ik me hier?). Dat is mijn eerste probleem al. Ik dacht er namelijk aan een array te maken die er zo uit zag:

code:

var velden = new array();
velden[1_1] = "veld1";
velden[1_2] = "veld2";
velden[1_3] = "veld3";
velden[2_1] = "veld4";
velden[2_2] = "veld5";
velden[2_3] = "veld6";
velden[3_1] = "veld7";
velden[3_2] = "veld8";
velden[3_3] = "veld9";

waarbij veld 4,5,6 onder 1,2,3 staan en 7,8,9 daar weer onder.
Dan zou ik 'm op die _ kunnen splitten en aan de hand van de beweging (pijltje) uitmaken of ik iets met het cijfer vóór de _ of het cijfer er achter moest doen (optellen of aftrekken). Ik ben die poging dus maar gestopt.

Maar, wat zowiezo een nadeel was is dat je altijd je velden in een array moet zetten. Ik vroeg me af of het niet mogelijk is om iets van een id= op te nemen in je input tag waar uit blijkt wat de positie van die input tag in het geheel is, en die je dus bij een onkeydown kunt uitlezen zodat je vervolgens op een andere kunt focussen.?
ik kan niet met de name="" klooien want die staan vrij vast, aangezien het in m'n post een array moet worden die ik dan weer kan verwerken

[Verwijderd]

Dit is wat ik graag wil gaan maken:

Een functie die er voor zorgt dat je met de pijltjes toetsen (of eventueel andere toetsen) tussen de input tags van een form kunt skippen (dus 2D alle richtingen op).

Wat is er mis met TAB + shift-TAB ?

Ahum, ja over waarom-alinea heengelezen...

Je kan ook met Labels/Acceskey + Tabindexes :

HTML:

[...]
<LABEL for="naam" ACCESSKEY="n">Naam:</LABEL>
 <input name="naam" size="44" tabindex="1"><br>
<LABEL for="e-mail adres" ACCESSKEY="e">E-mail adres:</LABEL> 
 <input name="email" size="38" tabindex="2"><br>
<LABEL for="provider" ACCESSKEY="p">Provider:</LABEL> 
 <input type="text" name="provider" size="42" tabindex="3"><br>
[...]

werken als het om benoembare tabs gaat (maximaal 26 ivm alfabet) of specifieke tabvolgordes wil bepalen in een kleine matrix.

Door ieder inputveld een naam/coordinaat te geven (in name/id), een specifieke toetscombo af te vangen met JS en de focus dan x/y te veplaatsen kun je ook een heel eind komen.

Als er maar een paar velden ingevoerd hoeven te worden is muisbediening toch veel sneller?

[ Voor 84% gewijzigd door Verwijderd op 31-03-2003 06:09 ]

[SchizoDuckie]

uuuh check de search even, er is net een tijdje terug iemand geweest die een topic geopend heeft over met pijltjestoetsen navigeren over een form

[marty]

Verwijderd schreef op 30 March 2003 @ 10:45:
[...]

Wat is er mis met TAB + shift-TAB ?

In m'n eerste post heb ik ergens 'waarom' vet geschreven, daarachter staat het antwoord op je vraag

Papa Eend schreef op 30 March 2003 @ 13:49:
uuuh check de search even, er is net een tijdje terug iemand geweest die een topic geopend heeft over met pijltjestoetsen navigeren over een form

dat was ik :-)

alleen ging die vraag over hoe ik de pijltjes toetsen moest benaderen. Dat weet ik inmiddels. En nu zit ik dus met het probleem van hoe ik de structuur van m'n javascript het beste op kan bouwen aangezien mijn eerste plan met die arrays de mist in gaat.
Ik hoop dus dat het mogelijk is om op 1 of andere manier een functie te schrijven die bij een onkeydown, gelijk de positie van de cursor in m'n form kan bepalen en aan de hand daarvan gaat rekenen waar ie vervolgens op moet focussen. Ik kan, zoals ik al zei, helaas niet van de name="" attributes gebruik maken, maar hoop dat het kan met id="" attributes kan .. of iets anders.
Maarja...daar loop ik dus op dit moment op stuk. Ik heb geen idee hoe ik dat voor elkaar moet krijgen.
Even voor de duidelijkheid, ik hoef geen complete scripts ofzo - alleen een kickje in de goede richting hoe ik het aan moet pakken, dan kom ik er wel uit.

[Dryw.Filtiarn]

Voor het probleem van het tig keer tab moeten drukken om velden over te slaan zou je eens kunnen kijken naar "tabIndex" dit is een standaard propertie van een inputveld, waarmee je de volgorde van de tabs kunt bepalen.

Quote uit de Internet Explorer Reference Guide:
Description
Sets the tab index for the object.

Syntax
object.tabIndex[ = tabIndex]

Remarks
Tab selection order is determined by the value of tabIndex as follows:
• All elements with tabIndex > 0 are selected in increasing tab index order, or in source order for duplicate tab index values.
• All elements with tabIndex = 0, or without tabIndex set, are selected next, in source order if more than one.
• Elements with tabIndex = -1 are omitted from tabbing order.

This property has read-write permissions, meaning you can change as well as retrieve its current value.

[marty]

het is niet om moeilijk te doen, maar dan kom ik horizontaal net zo hard in de knoop.
Het is een interface die ik voor anderen schrijf en het is gewoon een veel gehoorde klacht dat ze dat niet kunnen. En als ik die tab-index verticaal maak, dan verschuif ik het probleem alleen maar, want als ze dan iets op een rij willen invullen, dan moeten ze alsnog tig keer op tab drukken.
ik zou dus echt 't liefst een oplossing hebben die omhoog, naar rechts, naar onder en naar links kan verplaatsen
maar igg bedankt voor het meedenken

[RobIII]

Je krijgt horizontaal sowieso een probleem denk ik, want wat als ik iets type en dan twee letters naar links wil? Dan druk ik op de pijltjes en verspringt in jouw geval de focus naar een andere textbox i.p.v. dat mijn cursor naar links gaat.

anyways, dit kwam ik na 3 minuten googlen tegen: Je moet "ALT" erbij indrukken (dus bovenstaand probleem is ook meteen opgelost)... Ik zou zelf ook wel wat in elkaar kunnen flansen, maar daar is het nu te laat voor. Als je er echt niet uit komt dan wil ik morgen wel effe voor je kijken wat ik kan doen...

HTML:

<html>
<head>
<script language="javascript">

var VK_LEFT = 0x25;
var VK_UP = 0x26;
var VK_RIGHT = 0x27;
var VK_DOWN = 0x28;

var reNameParser = /^txtPerson(\d+)(.+)$/;

var arColumnMap= new Array();

var n = 0;
arColumnMap["FirstName"] = ++n;
arColumnMap["col"+n] = "FirstName";
arColumnMap["LastName"] = ++n;
arColumnMap["col"+n] = "LastName";
arColumnMap["Address"] = ++n;
arColumnMap["col"+n] = "Address";
arColumnMap["City"] = ++n;
arColumnMap["col"+n] = "City";

function arrowKeyHandler(){

// ignore event if ALT key not pressed
//
if(!window.event.altKey){return}

// ignore event if not an input type=text
//
var ae = document.activeElement;

if(ae.tagName.toLowerCase() != "input"){return}
if(ae.type.toLowerCase() != "text"){return}
var sMsg;

// ignore event if not an arrow navigation key
//
switch (window.event.keyCode){
case VK_LEFT : {sMsg = "VK_LEFT from: ";break}
case VK_UP : {sMsg = "VK_UP from: ";break}
case VK_RIGHT : {sMsg = "VK_RIGHT from: ";break}
case VK_DOWN : {sMsg = "VK_DOWN from: ";break}
default : return;
}

msg.innerHTML = sMsg + ae.name;

// ignore event if name not "txtPerson<row><colName>" format
//
if(!reNameParser.exec(ae.name)){return}
if(!RegExp.$2){return}

// extract and increment row/col values
//
var row,col;
row = RegExp.$1;

var colName
colName = RegExp.$2;

if(!arColumnMap[colName]){
msg.innerHTML += "<br>" + "colName: " + colName + " not found";
return;
}

col = arColumnMap[colName];

msg.innerHTML += "<br>" + "current: txtPerson" + row + colName;

switch(window.event.keyCode){
case VK_LEFT : {col--;break;}
case VK_UP : {row--;break;}
case VK_RIGHT : {col++;break;}
case VK_DOWN : {row++;break;}
}

if(!arColumnMap["col" + col]){
msg.innerHTML += "<br>" + "col" + col + " not found";
return;
}

var sNextElement;
sNextElement = "txtPerson" + row + arColumnMap["col" + col];

msg.innerHTML += "<br>" + "next: " + sNextElement;

// try to get row<row>text<col> element from
// the wrapper//s immediate children collection
//
var nextElement;
nextElement = arrowKeyWrapper.all.item(sNextElement);
//alert(arrowKeyWrapper.all.item(sNextElement))

// exit if it doesn//t exist
//
if(!nextElement){
msg.innerHTML += " [not found]";
return;
}

// otherwise give it the focus
//
nextElement.focus();

msg.innerHTML += "<br>moved to: " + nextElement.name;

} // arrowKeyHandler

</script>
</head>
<body>
<form>
<div id="arrowKeyWrapper" onkeydown="arrowKeyHandler()">
<input type="text" name="txtPerson1FirstName">
<input type="text" name="txtPerson1LastName">
<input type="text" name="txtPerson1Address">
<input type="text" name="txtPerson1City"><br>
<input type="text" name="txtPerson2FirstName">
<input type="text" name="txtPerson2LastName">
<input type="text" name="txtPerson2Address">
<input type="text" name="txtPerson2City"><br>
</div>
</form>
<div id="msg"></div>
</body>
</html>

Effe copy & pasten en testen zou ik zeggen...Alleen de combo "naar links" werkt niet helemaal jofel hier, en het is redelijk IE 5+ only zo op 't eerste gezicht...

edit:
Werkt toch wel... Lag aan HomeSite

[ Voor 70% gewijzigd door RobIII op 31-03-2003 04:27 ]

[TwoR]

Dit script dat hier boven staat werkt ook niet helemaal goed want als je ALT <-- Indrukt ga je ook naar de vorige pagina en dus niet een invulveld naar links

[RobIII]

Ten eerste gaat het hier om het idee en ten tweede kan dit makkelijk worden aangepast met b.v. Ctrl of shift (je verliest dan weer andere functionaliteit, maar dat is een trade-off waar hij zelf voor kiest).