[JS] navigeren formulier met pijltjes

[osorkon!]

Kzit met het volgende probleem:

Heb redelijke grote en uitgebreide formulieren,

Het zou makkelijk zijn om daardoor te kunnen navigeren met de pijltjes toetsen:

omhoog,omlaag,rechts, links kunnen gaan in het formulier.

Kheb een scriptje geschreven hiervoor, maar is tamelijk omslachtig. Zou er geen manier zijn om dit te kunnen toepassen op elk formulier zonder aanpassingen te doen aan het formulier zelf?

JavaScript:

var formulier = document.getElementById('alle');
var focusedElement = 0;
formulier.elements[0].focus();
document.addEventListener('keydown',doSomething,true);

for(var i=0; i < formulier.elements.length; i++)
{
    if(formulier.elements[i].type == 'text'){
        formulier.elements[i].tabIndex = i; 
        formulier.elements[i].setAttribute('style','text-align: center; width:60px;');
    }
    else
        formulier.elements[i].tabIndex = -1;    
}

function doSomething(e) {
    var ascii = e.keyCode;
    
    if(ascii >= 37 && ascii <= 40)
    {
        var sel;
        
        switch(ascii)
        {
            case 37:
                sel = focusedElement - 1;
                if(formulier.elements[sel].type=='hidden')
                    sel--;
            break;
            
            case 38:
                sel = focusedElement - 7;
            break;
            
            case 39:
                sel = focusedElement + 1;
                if(formulier.elements[sel].type=='hidden')
                    sel++;
            break;
            
            case 40:
                sel = focusedElement + 7;
            break;
        }
        
        if(sel < 0)
            sel = 0;
            
        
        formulier.elements[sel].focus();
        formulier.elements[sel].select();
    }
}

function foc(ele)
{
    focusedElement = ele.tabIndex;
}

[hing]

wat is er eigenlijk mis met tab/shift+tab om naar de volgende/vorige input te springen?

[Verwijderd]

Er lijken nogal wat aannames in je script te zitten, die voor mij niet 100% te volgen zijn. De -7 en +7 bijvoorbeeld.

Ik denk dat je uitgangspunt niet helemaal juist is. Die navigatie met pijltjestoetsen staat in verhouding met de weergave van de elementen op het scherm. Ik zou dan ook uitgaan van de layout van je formulier. Hier kun je (en, qua semantiek, "mag" je volgens mij) een table voor gebruiken, met één element per td.

Pijltje naar boven moet dus betekenen: één tr naar boven; pijltje naar links: één td naar links; etc.

Dit wordt waarschijnlijk een ingewikkelder script, maar met het grote voordeel dat het in principe op elk willekeurig form toegepast kan worden.

Hoop dat je hier iets aan hebt.

[osorkon!]

hing schreef op donderdag 26 juli 2007 @ 10:40:
wat is er eigenlijk mis met tab/shift+tab om naar de volgende/vorige input te springen?

Dit is in principe goed, maar stel dat je naar volgende lijn wil gaan moet je 6-7 maal tab drukken, tijdverlies..

Verwijderd schreef op donderdag 26 juli 2007 @ 10:48:
Er lijken nogal wat aannames in je script te zitten, die voor mij niet 100% te volgen zijn. De -7 en +7 bijvoorbeeld.
....

Zou er een soort van script al bestaan, waar ik kan van vertrekken of zou ik helemaal moeten herbeginnen hiervoor?

[ Voor 36% gewijzigd door osorkon! op 26-07-2007 11:57 ]

[Cadezo]

Verwijderd schreef op donderdag 26 juli 2007 @ 10:48:
Ik zou dan ook uitgaan van de layout van je formulier. Hier kun je (en, qua semantiek, "mag" je volgens mij) een table voor gebruiken, met één element per td.

Off-topic: maar kan ook zonder: Forms without tables

[crisp]

Ik zou persoonlijk 'pijltje links' en pijltje rechts' niet gaan afvangen; dat maakt het enkel lastig om in text-input velden verbeteringen aan te brengen en ja kan feitelijk al de tab daarvoor gebruiken. Voor de rest is eea afhankelijk van de markup, maar ik denk dat je met wat simpel DOM-traversel al een heel eind komt als het inderdaad gaat om verschillende 'rijen' met een vast aantal inputs.

[ Voor 6% gewijzigd door crisp op 26-07-2007 23:46 ]

[beetle71]

osorkon! schreef op donderdag 26 juli 2007 @ 11:56:
Dit is in principe goed, maar stel dat je naar volgende lijn wil gaan moet je 6-7 maal tab drukken, tijdverlies..

Waarom moet je 6-7 maal drukken? Als je je formfields netjes voorziet van een TABINDEX dan ga je met een druk op de TAB-toets toch gewoon netjes naar het volgende veld.....

edit:
Ah, ik denk nu dat ik je begrijp. Je hebt een soort 'excel' like formulier. Wellicht kun je dan ook de 'ENTER' gebruiken om naar een volgende rij te gaan. Dat levert dan verder ook geen problemen op met het editen van een field mbv. de cursortoetsen (zoals crisp hierboven ook al aangeeft)

[ Voor 28% gewijzigd door beetle71 op 27-07-2007 08:25 ]

[WouZz]

Persoonlijk zou ik het met tabindex en/of accesskeys oplossen..

[osorkon!]

Ik heb het ongeveer kunnen oplossen door het hele formulier in een tabel te zetten, kijken waar de focus staat en die rij en col opslaan, bij het drukken van de pijltjes ga ik dan kijken of er een rij boven of onder (of col is), kijk of er een formulier element instaat en daarna de focus erop zetten Het is nog niet perfect maar het werkt wel al. Zal het later eens posten voor nog een beetje feedback of hints.

[Verwijderd]

heb laatst voor een prototype ook even snel een grid gemaakt, code is niet optimaal, maar de essentie is wel duidelijk denk ik. Is zo te horen ook hetzelfde als wat jij hebt gedaan (onderdeel van een datagrid proto waar this.tBody een verwijzing is naar het tbody element):

JavaScript:

    this.tBody.onkeydown = function(e) {
        var key = e.which||event.keyCode;
        var tar = e.target||event.srcElement;
        var dirx = 0;
        var diry = 0;
        if (key==38) diry = -1;
        if (key==40 || key==13) diry = 1;
        if (key==37 && tar.value=='') dirx = -1;
        if (key==39 && tar.value=='') dirx = 1;
        if ((diry!=0 || dirx!=0) && self.selectedCell) {
            var cellId = self.selectedCell.cellIndex+dirx;
            var rowId = self.selectedCell.parentNode.rowIndex+diry;
            if (self.table.rows[rowId] && self.table.rows[rowId].cells[cellId] && 
                self.table.rows[rowId].cells[cellId].firstChild &&
                self.table.rows[rowId].cells[cellId].firstChild.nodeName.toLowerCase()=='input'
            ) self.table.rows[rowId].cells[cellId].firstChild.focus();
        }
    }

[ Voor 4% gewijzigd door Verwijderd op 28-07-2007 13:44 ]

[TheRookie]

osorkon! schreef op donderdag 26 juli 2007 @ 11:56:
Zou er een soort van script al bestaan, waar ik kan van vertrekken of zou ik helemaal moeten herbeginnen hiervoor?

Je zou ook nog bij google docs & spreadsheets kunnen spieken hoe ze 't daar doen