form value check als je iets invult

[john_l]

Hoi,

Ik heb 0 ervaring met javascript's, maar ben wel opzoek naar iets specifieks .
Hopelijk zit hier genoeg ervaring zodat jullie me verder kunnen helpen.

Ik heb een formulier met verschillende invulvelden. 1 van die velden zal worden gebruikt om een tijd in te vullen,
bv 14:30

Nu is het gewoon een tekstveld, dus je kan van alles invullen. Nu zou ik graag (en ik begrijp dat dit het best kan met een javascriptje) een scriptje hebben dat ervoor zorgt dat gebruikers alleen cijfers en een : kunnen invoeren.

Wat helemaal mooi zou zijn als de : al in het veld zou staan : XX:XX

De gebruiker hoeft dus alleen 1430 in te tikken om als resultaat 14:30 te krijgen.

Kan iemand hier mij mee verder helpen ???

(zit al een paar dagen te zoeken naar iets bestaand, maar kom niet verder dan een script dat ervoor zorgt dat je alleen cijfers in een tekst veld kan invullen )

[john_l]

Het lukt me nu ook om een : in te vullen.

Dus als iemand weet hoe ik het voor elkaar kan krijgen om alleen nog een : zichtbaar te krijgen op de juiste locatie als input !!
Wat ik nu heb :

function isNumberKey(evt)
{
var charCode = (evt.which) ? evt.which : event.keyCode
if (charCode > 31 && (charCode < 48 || charCode > 58))
return false;

return true;
}

dus : 1234567890: kan ik gebruiken......

[battlequeen]

Met indexOf( ) kan je zoeken op elke positie de : staat en met .length de lengte van de input

de indexOf(':') moet dus 2 terug geven (3e positie) en .length moet 5 terug geven
Anders is de input niet geldig

Om de getallen na te kijken kan je erna de invoer in 2 stukken breken met .split(':');
dan kan je kijken of de getallen in de tijdrange vallen :

Code: Alles selecteren

var tijden = invoer.split(':');
if( isNaN(tijden[0]) || tijden[0] < 0 || tijden[0] > 23 || isNaN(tijden[1]) || tijden[1] < 0 || tijden[1] > 59 ){
  return false;
}


[john_l]

Hmm, snap hem niet helemaal
Maar misschien ben ik niet duidelijk.

Het gaat er om dat gebruikers zelf een tijd invoeren in een veld.
Het format is dus 16:30

Het zou makkelijk zijn als het 3de karakter automatisch ingevuld wordt, de dubbele punt dus.

Ik heb nu een script welke ervoor zorgt dat alleen cijfers en een dubbele punt in het betreffende veld kan worden ingevoerd.

[jeppeb]

Code: Alles selecteren

<script type="text/javascript">
function isNumberKey(evt, veld)
{
var charCode = (evt.which) ? evt.which : event.keyCode
if (charCode > 31 && (charCode < 48 || charCode > 58) || veld.value.length > 4)
return false;

return true;
}
function controleerVeld(veld){
if(veld.value.length == 2){
veld.value += ":"
}
}
</script>
<input type="text" onkeypress="return isNumberKey(event, this);" onkeyup="controleerVeld(this)">

Zo zou je het kunnen doen, dus met een extra functie (heb isNumberKey ook aangepast trouwens) die de dubbele punt toevoegt als er twee getalen zijn ingevoerd.
Nadeel van de huidige oplossing is dat de backspace knop ook geblokkerd wordt, daar zou ik nog een uitzondering voor toevoegen. Hoewel je de dubbele punt dan nog steeds niet zou kunnen verwijderen: de lengte van het veld wordt weer 2 als je die verwijdert waarna er weer een dubbele punt wordt toegevoegd Als je dit allemaal niet erg vind werkt het zo prima. Anders horen we het wel weer

[john_l]

werkt super !!!
Maar die uitzondering voor de backspace zou idd wel super handig zijn

Kan je die nog toelichten ??

[jeppeb]

Zoals je hier kan vinden is de code van de backspace 8, de eerste functie wordt dus als volgt:

Code: Alles selecteren

function isNumberKey(evt, veld)
{
var charCode = (evt.which) ? evt.which : event.keyCode
if (charCode > 31 && (charCode < 48 || charCode > 58) || veld.value.length > 4){
if (charCode != 8){
return false;
}
}

Dit werkt prima, totdat je dus de dubbele punt weg wilt halen, probeer maar eens!

Dit werkt denk ik wel:

Code: Alles selecteren

<script type="text/javascript">
function isNumberKey(evt, veld)
{
var charCode = (evt.which) ? evt.which : event.keyCode
if (charCode > 31 && (charCode < 48 || charCode > 58) || veld.value.length > 4){
if (charCode != 8){
return false;
}
}

return true;
}
function controleerVeld(evt, veld){
var charCode = (evt.which) ? evt.which : event.keyCode
if(veld.value.length == 2 && charCode != 8){
veld.value += ":"
}
}
</script>
<input type="text" onkeypress="return isNumberKey(event, this);" onkeyup="controleerVeld(event, this)">

[john_l]

Werkt super, mijn dank is groot !!!!

[Zunflappie]

Dus als ik 16:30 typ.... dan staat er 16::30?

Waarom die dubbele punt gewoon NIET als teken weergeven, maar in de achtergrond?
Beetje font-spacing om hem ruimte te geven (3px is genoeg).
Dan kan men gewoon 1630 typen.
Geen gezeur met dubbele punten, puntkomma's of enkele punten. Gewoon 4 getallen.
Is nog eens makkelijker controleren, want 2359 is dan de hoogste waarde .

[jeppeb]

Dus als ik 16:30 typ.... dan staat er 16::30?

Dan zou er 16::3 komen te staan.

Makkelijkere oplossing: zorg dat de dubbele punt geen toegestaan teken is, dus zoals je eerst had, dat je alleen cijfers in mag vullen:

Code: Alles selecteren

function isNumberKey(evt, veld)
{
var charCode = (evt.which) ? evt.which : event.keyCode
if (charCode > 31 && (charCode < 48 || charCode > 57) || veld.value.length > 4){
if (charCode != 8){
return false;
}
}