Ik heb een autojump functie gemaakt omdat ik vier input velden heb en nadat je 4 cijfers invoert springt hij automatisch naar het 2e veld maar wanneer je de backspace indrukt kan je alleen de gegevens in 1 veld verwijderen en nu wil ik dat hij automatisch terug springt naar het vorige input veld, dit is mijn code weet iemand hoe?
Javascript:
function moveOnMax(field,nextFieldID){
if(field.value.length >= field.maxLength){
document.getElementById(nextFieldID).focus();
}
}
HTML:
<div class="coupon">
<input class="inputCard" id="coupona" type="text" size="4" maxlength="4" onkeyup="moveOnMax(this,'couponb')"/>
-
<input class="inputCard" id="couponb" type="text" size="4" maxlength="4" onkeyup="moveOnMax(this,'couponc')"/>
-
<input class="inputCard" id="couponc" type="text" size="4" maxlength="4" onkeyup="moveOnMax(this,'coupond')"/>
-
<input class="inputCard" id="coupond" type="text" size="4" maxlength="4"/>
<a href="#"><img style="margin-bottom: -9px;" src="{$img}button_valideer.png" alt="Valideer" /></a>
</div>
- Autojump naar andere input veld
-
03-06-2014, 19:28 #1
Coremeta Holding B.V.
- Berichten
- 255
- Lid sinds
- 13 Jaar
Autojump naar andere input veld
-
04-06-2014, 12:52 #2
- Berichten
- 69
- Lid sinds
- 18 Jaar
Re: Autojump naar andere input veld
Voorbeeld:
http://jsfiddle.net/rwRcE/
HTML:
<div class="coupon">
<input class="inputCard" id="coupona" type="text" size="4" maxlength="4" onkeyup="moveOnMax(this,'couponb')"/>
-
<input class="inputCard" id="couponb" type="text" size="4" maxlength="4" onkeyup="moveOnMax(this,'couponc');moveOnBackspace (this, 'coupona')"/>
-
<input class="inputCard" id="couponc" type="text" size="4" maxlength="4"onkeyup="moveOnMax(this,'coupond');mo veOnBackspace(this, 'couponb')"/>
-
<input class="inputCard" id="coupond" type="text" size="4" maxlength="4" onkeyup="moveOnBackspace(this, 'couponc')" />
<a href="#"><img style="margin-bottom: -9px;" src="{$img}button_valideer.png" alt="Valideer" /></a>
</div>
Javascript:
function moveOnMax(field,nextFieldID){
if(field.value.length >= field.maxLength){
document.getElementById(nextFieldID).focus();
}
}
function moveOnBackspace(field, prevFieldID){
if(field.value.length == 0)
{
document.getElementById(prevFieldID).focus();
}
}
Edit:
Dit is niet de beste oplossing, maar het werkt in aardig wat gevallen. Met mijn keyboardinstellingen gaat het bijvoorbeeld nog mis als je in een leeg veld staat en de ' typt, want bij mij vult hij die niet gelijk in, maar wacht tot ik een andere toets indruk zodat ik de é kan typen bijvoorbeeld. Maargoed, dit was even een snelle oplossing.
Wil je het echt goed doen moet je eventlisteners aan je inputvelden hangen en kijken of de backspace is ingedrukt.Laatst aangepast door Tim Colla : 04-06-2014 om 12:58
-
04-06-2014, 13:06 #3
Coremeta Holding B.V.
- Berichten
- 255
- Lid sinds
- 13 Jaar
Re: Autojump naar andere input veld
Bedankt het werkt
Plaats een
- + Advertentie
- + Onderwerp
Marktplaats
Webmasterforum
- Websites algemeen
- Sitechecks
- Marketing
- Domeinen algemeen
- Waardebepaling
- CMS
- Wordpress
- Joomla
- Magento
- Google algemeen
- SEO
- Analytics
- Adsense
- Adwords
- HTML / XHTML
- CSS
- Programmeren
- PHP
- Javascript
- JQuery
- MySQL
- Ondernemen algemeen
- Belastingen
- Juridisch
- Grafisch ontwerp
- Hosting Algemeen
- Hardware Info
- Offtopic