[JS] Te snel typen voor inputfield.select(); ? - Softwareontwikkeling

maandag 15 september 2008 13:04

Acties:

Verwijderd

Topicstarter

Hallo medemensen,

ik ben momenteel bezig met een datumveld, bestaande uit drie invoervelden; de dag, de maand en het jaar. Als je in het invoerveld "dag" 2 tekens invult, dan verspringt de focus automatisch naar het invoerveld "maand", en wordt de tekst in dit veld geselecteerd. Als er in dit veld 2 tekens zijn ingevuld, dan wordt er automatisch versprongen naar het veld "jaar". Dit werkt in principe prima, tenzij de gegevens te snel worden ingevoerd. Er worden dan velden overgeslagen. Als je voor het eerst de velden invoert, dan werkt het naar behoren, maar als je vervolgens vanaf het eerste veld de velden opnieuw invult, waarbij ze dus al zijn ingevuld, dan worden er velden overgeslagen.

Ik heb zelf de indruk dat de tekst te laat wordt geselecteerd met select(). Na het uitvoeren van select() heeft het veld al wel de focus gekregen, maar de tekst is nog niet geselecteerd. Ondertussen drukt de gebruiker al op een knop, en wordt de switchfield() methode uitgevoerd. Omdat de tekst in het veld nog niet was geselecteerd, en de maxlength property van het veld inmiddels al op 2 staat, wordt de waarde van de toetsaanslag door de gebruiker dus niet toegevoegd. Wel wordt er door de functie switchfield genavigeerd naar het volgende invoerveld.

Als dit zo zou zijn, dan weet ik zo geen nette oplossing. (misschien iets met wat lelijke hacks, maar dan veroorzaak je volgens mij meer ellende dan je oplost)

Ik heb een versimpelde versie gemaakt, waarbij dezelfde fout optreedt. Het gaat om de volgende code:

HTML:

<html>
    <head>
        <script type="text/javascript">
            
            var input1;
            var input2;
            var input3;
            var input4;
            var input5;
            var input6;
            
            function init() {
                input1 = document.getElementById("input1");
                input2 = document.getElementById("input2");
                input3 = document.getElementById("input3");
                input4 = document.getElementById("input4");
                input5 = document.getElementById("input5");
                input6 = document.getElementById("input6");             
            }
            
            function switchField(currentBox, currentPos) {
            
                if (currentBox.value.length == 2) {

                    switch (currentPos) {
                    
                        case 1: input2.select();
                                break;
                        case 2: input3.select();
                                break;
                        case 3: input4.select();
                                break;
                        case 4: input5.select();
                                break;
                        case 5: input6.select();
                                break;
                    }
                }
            }
            
            
        </script>
    </head>
    <body onload="init();">

    <input type="text" name="input1" id="input1" onkeyup="switchField(this, 1);" maxlength="2" />
    <input type="text" name="input2" id="input2" onkeyup="switchField(this, 2);" maxlength="2" />
    <input type="text" name="input3" id="input3" onkeyup="switchField(this, 3);" maxlength="2" />
    <input type="text" name="input4" id="input4" onkeyup="switchField(this, 4);" maxlength="2" />
    <input type="text" name="input5" id="input5" onkeyup="switchField(this, 5);" maxlength="2" />
    <input type="text" name="input6" id="input6" onkeyup="switchField(this, 6);" maxlength="2" />

    </body>
</html>

maandag 15 september 2008 13:33

Acties:

TheDane

1.618

Kun je niet iets doen met een changed property? Dus dat je alleen naar het volgende tekstveld springt als er 2 karakters zijn, maar er OOK een wijziging heeft plaatsgevonden? (het changed veld wijzig je bij keyup en reset je bij het springen naar een andere textfield.)

De Postbank heeft ook zo'n functionaliteit voor het invoeren van betalingskenmerken. Ik heb nog nooit problemen gehad met te snel invoeren van tekst.

offtopic:
Walgelijke functie overigens, ik bepaal zelf wel of ik naar het volgende veld ga dmv <tab>, werkt veel sneller & voorspelbaarder.

offtopic:
En nog een: waarom gebruik je geen date picker voor je datumselectie?

maandag 15 september 2008 13:41

Acties:

Verwijderd

Topicstarter

Een date picker is inderdaad netter.. Het gaat hier helaas om een bestaande applicatie, die op dezelfde manier moet blijven werken als nu. Ik mag dus geen functionaliteit veranderen, ik mag alleen de bug oplossen

edit: Om terug te komen op het inhoudelijke deel van je reactie
Volgens mij gaat dit niet werken? Je kunt sowieso geen data invoeren in het veld als de tekst niet is geselecteerd, en de maximale lengte al is bereikt. Het zou dan lijken alsof er toetsaanslagen verdwijnen voor de gebruiker volgens mij. Je zou de maxlength eigenschap kunnen verwijderen, maar dan zijn er ook weer rare uitzonderingen mogelijk...

[ Voor 49% gewijzigd door Verwijderd op 15-09-2008 13:49 ]

maandag 15 september 2008 14:44

Acties:

moozzuzz

Je hebt het probleem enkel als het een reeds ingevuld veld betreft? Klinkt bijna alsof de onKeyUp() doorgegeven wordt aan de andere inputs (wat volgens mij niet kan

)

maandag 15 september 2008 14:48

Acties:

Verwijderd

Topicstarter

Ja, alleen als hij is ingevuld. Ik heb inmiddels maar doorgegeven dat het probleem bij de browser ligt... Een eventuele oplossing zou zijn om de velden te legen voordat ze worden geselecteerd, ipv dat je de aanwezige tekst selecteert, maar ze moeten zelf maar bepalen of ze dat zo willen dan

maandag 15 september 2008 14:54

Acties:

Verwijderd

moozzuzz schreef op maandag 15 september 2008 @ 14:44:
Je hebt het probleem enkel als het een reeds ingevuld veld betreft? Klinkt bijna alsof de onKeyUp() doorgegeven wordt aan de andere inputs (wat volgens mij niet kan )

Ik denk ook dat dat is wat er gebeurt. De select() vindt plaats voordat het keyup event volledig afgewerkt is waardoor de keyup ook nog eens voor de nieuw geselecteerde input plaatsvindt.

Probeer eens:

JavaScript:

1
2
3

case 1: 
    setTimeout(function() { input2.select(); }, 10);
    break;

(voor alle cases uiteraard)

maandag 15 september 2008 15:05

Acties:

Verwijderd

Topicstarter

ff geprobeerd.

Als ik een timer gebruik, dan verplaats ik het probleem; Het ene veld heeft al de maximale lengte bereikt, en kan dus niet meer worden aangevuld. Ondertussen is het volgende veld nog niet geselecteerd ivm de vertraging, en er gaan toetsaanslagen verloren.

maandag 15 september 2008 17:19

Acties:

MBV

Zorg met een gedeelde variabele o.i.d. ervoor dat er maar 1 functie tegelijk bezig kan zijn?

maandag 15 september 2008 18:31

Acties:

pedorus

Het lijkt me dat de vorige toets daadwerkelijk nog ingedrukt is als de volgende wordt ingetoetst. Als je een toets in blijft houden, dan werkt dit sowieso nooit. Vandaar dat ik aan zou raden om zowel bij onkeydown als onkeyup dezelfde eventhandler te gebruiken.. Liever eigenlijk nog: implementeer alleen onkeydown, zodat tab goed blijft werken. En implementeer dan gelijk backspace! En let erop dat je bij bijvoorbeeld tab niets doet!

[ Voor 6% gewijzigd door pedorus op 15-09-2008 18:38 ]

Vitamine D tekorten in Nederland | Dodelijk coronaforum gesloten