PHPhulp.nl PHPhulp.nl
35k+ leden Over PHPhulp Offerte opdracht Contact

Opmaak IBAN-invulveld

Door George van Baasbank op 14-08-2014 13:56
5.456 views
Hallo allemaal,

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" />&nbsp;&nbsp;
<input type="text" pattern="[0-9]{1}" placeholder="9" size="1" />
<input type="text" pattern="[0-9]{1}" placeholder="9" size="1" />&nbsp;&nbsp;
<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" />&nbsp;&nbsp;


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
Ward van der Put
14-08-2014 14:05
Ik zou de inputs op size="4" zetten, en de laatste op size="2", want het is gebruikelijk om een IBAN weer te geven in groepen van 4 karakters:

NL## BANK #### #### ##
Ariën
14-08-2014 14:07
Waarom verschillende velden, en niet gewoon 1 geheel?
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/
George van Baasbank
14-08-2014 14:10
Inmiddels ben ik zover:


<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" />&nbsp;&nbsp;
                <input type="text" pattern="[0-9]{1}" placeholder="9" size="1" />
                <input type="text" pattern="[0-9]{1}" placeholder="9" size="1" />&nbsp;&nbsp;
                <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" />&nbsp;&nbsp;
                <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:

.upper {  
    text-transform: uppercase;
}

.veldopmaak {
    border-style: dashed;
    width: 12px;
}


Ik wil graag EEN teken per invulveld.
Ariën
14-08-2014 14:11
Ik betwijfel persoonlijk of dit op een mobiele device goed zal werken?
George van Baasbank
14-08-2014 14:38
Wie heeft er nog een suggestie om de cursor steeds naar het volgende veld te laten springen?
Ariën
14-08-2014 14:43 gewijzigd op 14-08-2014 14:45 

<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?
Ward van der Put
14-08-2014 14:44 
<input onkeyup="document.getElementById('id_van_volgende_input').focus();" />
Ivo P
14-08-2014 14:46
als je dat per se wilt doen, zorg dan dat het 100% fool-proof is: paste met de muis? dus niet alleen op key-up reageren.

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.
- SanThe -
14-08-2014 14:51
@Ward: Leuk bij een backspace... toch?

Reageren

Inloggen om te reageren