De PHPhulp kroeg
Opmaak IBAN-invulveld
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
Code (php)
1
.upper { text-transform: uppercase; }
HTML
Code (php)
1
2
3
4
5
6
7
8
9
2
3
4
5
6
7
8
9
<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" />
<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
NL## BANK #### #### ##
Als het bedoeld is om leesbaarheid te vergroten en ev.t. typfouten te minimaliseren, dan kan je je beroepen op de checksumcontrole van de 'Proef van de Elf' waar een rekeningnummer aan moet voldoen, en een controle op het getal halverwege de IBAN-code.
Deze is op een simpele manier te berekenen:
http://www.ibannl.org/uitleg-over-iban/
Code (php)
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
<section>
<article>
<div class="kader900">
<label>IBAN-nummer:</label><br />
<label>IBAN-code:</label><br/>
<input class=" veldopmaak upper" type="text" pattern="[A-Z]{1}" placeholder="A" size="1" />
<input class=" veldopmaak 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" />
<input type="text" pattern="[0-9]{1}" placeholder="9" 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 type="text" pattern="[0-9]{1}" placeholder="9" 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 type="text" pattern="[0-9]{1}" placeholder="9" 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 type="text" pattern="[0-9]{1}" placeholder="9" size="1" />
</div>
</article>
</section>
<article>
<div class="kader900">
<label>IBAN-nummer:</label><br />
<label>IBAN-code:</label><br/>
<input class=" veldopmaak upper" type="text" pattern="[A-Z]{1}" placeholder="A" size="1" />
<input class=" veldopmaak 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" />
<input type="text" pattern="[0-9]{1}" placeholder="9" 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 type="text" pattern="[0-9]{1}" placeholder="9" 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 type="text" pattern="[0-9]{1}" placeholder="9" 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 type="text" pattern="[0-9]{1}" placeholder="9" size="1" />
</div>
</article>
</section>
CSS:
Code (php)
1
2
3
4
5
6
7
8
2
3
4
5
6
7
8
.upper {
text-transform: uppercase;
}
.veldopmaak {
border-style: dashed;
width: 12px;
}
text-transform: uppercase;
}
.veldopmaak {
border-style: dashed;
width: 12px;
}
Ik wil graag EEN teken per invulveld.
Toevoeging op 14/08/2014 14:13:56:
misschien ter inspiratie: http://bradfrostweb.com/blog/post/single-field-credit-card-input-pattern/
Code (php)
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
<html>
<head>
<script type="text/javascript">
function toNextField(el,content){
if (content.length==el.maxLength){
next=el.tabIndex
if (next<document.forms[0].elements.length){
document.forms[0].elements[next].focus()
}
}
}
</script>
</head>
<body>
<form>
<input size="3" tabindex="1" maxlength="3" onkeyup="toNextField(this,this.value)">
<input size="3" tabindex="2" maxlength="3" onkeyup="toNextField(this,this.value)">
<input size="3" tabindex="3" maxlength="3" onkeyup="toNextField(this,this.value)">
</form>
</body>
</html>
<head>
<script type="text/javascript">
function toNextField(el,content){
if (content.length==el.maxLength){
next=el.tabIndex
if (next<document.forms[0].elements.length){
document.forms[0].elements[next].focus()
}
}
}
</script>
</head>
<body>
<form>
<input size="3" tabindex="1" maxlength="3" onkeyup="toNextField(this,this.value)">
<input size="3" tabindex="2" maxlength="3" onkeyup="toNextField(this,this.value)">
<input size="3" tabindex="3" maxlength="3" onkeyup="toNextField(this,this.value)">
</form>
</body>
</html>
Maar ik geef eerlijk toe. Dit is een grote crime als je wilt copy-pasten.
Ik vraag me nog steeds af waarom je expliciet meerdere inputvelden wilt hebben?
Gewijzigd op 14/08/2014 14:45:05 door - Ariën -
Code (php)
1
<input onkeyup="document.getElementById('id_van_volgende_input').focus();" />
backspace doet wat anders dan een andere toets, dus reageer daar ook goed op.
cursor toetsen ook goed afvangen
Flink wat situaties om rekening mee te houden. Ik herinner me nog een bank-omgeving waar de betalingskenmerken van een acceptgiro ook niet altijd goed gingen. is dus kennelijk best moeilijk.
