Ik zit met de volgende uitdaging:
Ik wil dat de gebruiker een "mooi" opgemaakt invulveld krijgt te zien bij het invullen van een IBAN-nummer.
Alleen ontbreekt mij de inspiratie op dit moment om iets te bouwen. Ik wil n.l. dat
1. Om ELK in te vullen veld bijv een [ en ] staan, het liefst gestippeld
2. Dat na het invullen van het vereiste teken (cijfer of letter) de cursor overspringt naar het volgende in te vullen veld
3. De letters automatisch in KAPITAAL worden getoond (dit heb ik al voor elkaar)
Het zoeken naar voorbeelden, o.a. op deze site, heeft mij nog niet veel opgeleverd.
Zijn er al bestaande oplossingen?
CSS
.upper { text-transform: uppercase; }
HTML
<label>IBAN-code:</label><br/>
<input class="upper" type="text" pattern="[A-Z]{1}" placeholder="A" size="1"/>
<input class="upper" type="text" pattern="[A-Z]{1}" placeholder="A" size="1" />
<input type="text" pattern="[0-9]{1}" placeholder="9" size="1" />
<input type="text" pattern="[0-9]{1}" placeholder="9" size="1" />
<input class="upper" type="text" pattern="[A-Z]{1}" placeholder="A" size="1" />
<input class="upper" type="text" pattern="[A-Z]{1}" placeholder="A" size="1" />
<input class="upper" type="text" pattern="[A-Z]{1}" placeholder="A" size="1" />
<input class="upper" type="text" pattern="[A-Z]{1}" placeholder="A" size="1" />
De html-code lukt nog niet met:
a. Overspringen naar volgend veld
b. Er kunnen meer tekens in één veld worden ingevuld
c. Ik krijg de [ en ] niet in het inputveld te zien
d. De tussenruimte tussen de inputvelden krijg ik niet weg
George
