[html] automatisch van form field verspringen

[Verwijderd]

Ik heb een beetje een raar probleem. Ik heb een formulier gemaakt in html. Daarin moet ik een datum invoeren. De datum bestaat uit 3 velden. De dag, De maand en het jaar.
Maar omdat ik de datum vaak moet invullen heb ik geen zin om telkens op tab of enter te drukken. Nu is mijn vraag of dat ook automatisch kan.
Van een datum veld zoals dag weet ik dat die max. 2 char groot is.
Wat ik wil is dat als ik 2 characters in dat veld heb ingevoerd dat hij automatisch verspringt naar het volgende veld.
De maxlength van de input velden heb ik ingesteld.
Is dit mogelijk met html of moet ik met javascript aan de slag?

<form...
<input type="text" value="" name="dag" maxlength="2">
<input type="text" value="" name="maand" maxlength="2">
<input type="text" value="" name="jaar" maxlength="4">
.../form>

[Verwijderd]

Dat moet met javascript, kijk eens naar de length van een veld en zet dan focus() op het volgende veld. Daar moet je het zeker mee redden.

[Verwijderd]

Verwijderd schreef op 22 mei 2004 @ 14:54:
Dat moet met javascript, kijk eens naar de length van een veld en zet dan focus() op het volgende veld. Daar moet je het zeker mee redden.

Sorry, maar ik ben geen javascript freak..Basic javascript kan ik wel. Zou je me misschien ook een nadere verklaring kunnen geven van je antwoord.

[André]

code:

<form name="formulier">
  <input type="text" value="" name="dag" maxlength="2" onkeyup="if ((document.forms['formulier'].elements['dag'].value).length == 2) { document.forms['formulier'].elements['maand'].focus(); }">
  <input type="text" value="" name="maand" maxlength="2" onkeyup="if ((document.forms['formulier'].elements['maand'].value).length == 2) { document.forms['formulier'].elements['jaar'].focus(); }">
  <input type="text" value="" name="jaar" maxlength="4">
</form>

[Verwijderd]

En helemaal netjes is natuurlijk zoiets:

JavaScript:

<script type="text/javascript">
window.onload = function() {
    inp = document.getElementById('verspring').getElementsByTagName('input'); i = inp.length - 1;
    while (i--)
        inp[i].onkeyup = function() { if(this.value.length>=this.maxLength) this.nextSibling.nextSibling.focus();}
}
</script>

HTML:

<form id="verspring">
    <input type="text" value="" name="dag" maxlength="2">
    <input type="text" value="" name="maand" maxlength="2">
    <input type="text" value="" name="jaar" maxlength="4">
</form>

[Verwijderd]

Super!

heel erg bedankt!

[crisp]

onload behaviours toevoegen vind ik niet erg handig in veel gevallen. Neem bijvoorbeeld de inlogpagina van de webmail van XS4ALL; daar wordt onload pas de focus op het username veld gezet. Ik heb vaak genoeg dat ik al ben begonnen met het intypen van m'n usernaam, tabje, en vervolgens ben ik mijn wachtwoord aan het inkloppen en dan verspringt in ene de focus weer naar het usernaam veld en ziet iedereen mij m'n wachtwoord daar inkloppen.
Dat komt dus omdat de onload pas getriggered wordt als de hele pagina inclusief plaatjes volledig binnen is, maar de outline van de pagina is dan allang gerenderd - over een trage verbinding (zoals bij een bedrijfsnetwerk overdag ) kan daar dus aardig wat tijd tussen zitten. Ik probeer onload dan ook zo veel mogelijk te vermijden...

[Verwijderd]

Ik heb pas exact hetzelfde gefabriceerd, ik raad aan om het stukje code van Andre te gebruikem, maar dan net even iets handiger, bijvoorbeeld:

HTML:

<form name="formulier">
  <input type="text" value="" name="dag" maxlength="2" onkeyup="if (this.value.length >= this.maxLength) { this.form.elements['maand'].focus(); }">
  <input type="text" value="" name="maand" maxlength="2" onkeyup="if (this.value.length >= this.maxLength) { this.form.elements['jaar'].focus(); }">
  <input type="text" value="" name="jaar" maxlength="4">
</form>

[Verwijderd]

crisp schreef op 23 mei 2004 @ 13:23:
Ik probeer onload dan ook zo veel mogelijk te vermijden...

Tenzij je ervoor kiest om je javascript zoveel mogelijk van je (x)html te scheiden. _{Of in pupulaire termen natuurlijk behavior en structure...}

Dat is inderdaad meestal alleen gebaseerd op persoonlijke smaak, maar zelf zet ik liever zo min mogelijk eventhandlers direct in de code. Ach, ieder zijn eigen keuze.

[Verwijderd]

Het idee is leuk, maar de afwerking mist nog een aantal dingen. Als je bijvoorbeeld wilt (shift-)tabben naar een ingevuld veld, springt de cursor automatisch verder naar het volgende...een goede oplossing hiervoor heb ik ook nog niet.

[crisp]

Verwijderd schreef op 23 mei 2004 @ 13:44:
[...]
Tenzij je ervoor kiest om je javascript zoveel mogelijk van je (x)html te scheiden. _{Of in pupulaire termen natuurlijk behavior en structure...}

Dat is inderdaad meestal alleen gebaseerd op persoonlijke smaak, maar zelf zet ik liever zo min mogelijk eventhandlers direct in de code. Ach, ieder zijn eigen keuze.

ik wees alleen even op de nadelen daarvan
wat ik meestal doe is een gulden middenweg: en scriptblok inline plaatsen na de /form waarin ik de behaviours attach.

[Verwijderd]

Verwijderd schreef op 23 mei 2004 @ 14:04:
Het idee is leuk, maar de afwerking mist nog een aantal dingen. Als je bijvoorbeeld wilt (shift-)tabben naar een ingevuld veld, springt de cursor automatisch verder naar het volgende...een goede oplossing hiervoor heb ik ook nog niet.

Was vergeten nog te reageren, maar het afvangen daarvan is natuurlijk wel heel eenvoudig te doen:

JavaScript:

window.onload = function() {
 inp = document.getElementById('verspring').getElementsByTagName('input');
 i = inp.length - 1;
  while (i--)
   inp[i].onkeyup = function(e) {
    if (!e) var e = window.event; if(e.keyCode!=9&&e.keyCode!=16)
     if(this.value.length>=this.maxLength) this.nextSibling.nextSibling.focus();
   }
}