Limiet aan input type text
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:
Quote:
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:
Code (php)
1
<td id="kluis1" class="num">1</td>
Dit is het script achter een knop:
Code (php)
1
2
3
2
3
$("#kluis1").click(function () {
$("#kluisc").val($('#kluisc').val() + "1");
});
$("#kluisc").val($('#kluisc').val() + "1");
});
Maar het lukt mij niet om het volgende er tussen te zetten:
Code (php)
1
if($('#kluisc').length <= 4){.....}
alvast bedankt!
Groet,
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;
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
Ik test het vannacht even! Hartelijk bedankt!
Code (js)
1
2
3
4
5
6
7
8
9
2
3
4
5
6
7
8
9
<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>
<script type="text/javascript">
$(".num").on("click", function() {
val = $("#kluis").val();
if (val.length < 4) {
$("kluisc").val(val + $(this).data("num"));
}
}
</script>
Als je met het dataattribuut werkt kan je alles met één functie af.