Limiet aan input type text

Door Joep - op 27-04-2014 12:37

905 views

Hallo allemaal,
ik ben bezig met een soort van kluis te maken waar men een viercijferige code in kan vullen aan de hand van hun toetsen bord en/of de knoppen op het scherm.
Het limiet zetten op het typen met het toetsenbord werkt gewoon met:

maxlength="4"

Alleen een limiet op de knoppen werkt niet, waarschijnlijk omdat de waarde van het tekstveld wordt aangepast met Javascript.

Dit is de html van een knop:

<td id="kluis1" class="num">1</td>

Dit is het script achter een knop:

$("#kluis1").click(function () {
		$("#kluisc").val($('#kluisc').val() + "1");
	});

Maar het lukt mij niet om het volgende er tussen te zetten:

if($('#kluisc').length <= 4){.....}

alvast bedankt!

Groet,
Joep

Donny Wie weet

27-04-2014 18:51

Hoi Joep,

Is er een reset knop aanwezig om de code van de kluis te resetten? Anders kan je het volgende doen (even in plain uitgelegd)

Onclick van een nummer de counter+ 1 doen. counter++ zal de variabele counter met 1 verhogen.

controleren of de counter == aan 4:

if(counter == 4 ){
//Hier de actie die je wilt uitvoeren
}

Onclick van de reset knop: counter = 0;

Joep -

27-04-2014 18:59

Hallo donny,

Bedankt voor je reactie!
Ik heb alleen mijn twijfels bij jou oplossing,
Want als iemand nu zijn toetsenbord eerst gebruikt en vervolgens de knoppen op het scherm kan hij alsnog op 8 uit komen.
Momenteel heb ik even geen tijd om uit te testen of dat echt zo is, maar dat vermoeden heb ik wel.
Verder maak ik wel gebruik van een reset knop.

Groet,
Joep

Donny Wie weet

27-04-2014 19:12

Je kan ook de function keypress erin zetten, dan kan je de counter ook omhoog gooien

Joep -

27-04-2014 19:18

Oohja, tuurlijk! Function keypress zit er al in ????
Ik test het vannacht even! Hartelijk bedankt!

Ger van Steenderen

27-04-2014 19:34

Je was de value vergeten op te halen, dit zou wel moeten werken:
[code lang="js"]
<td class="num" data-num="1">
<script type="text/javascript">
$(".num").on("click", function() {
val = $("#kluis").val();
if (val.length < 4) {
$("kluisc").val(val + $(this).data("num"));
}
}
</script>
[/code]
Als je met het dataattribuut werkt kan je alles met één functie af.

Reageren

Inloggen om te reageren