[jquery] input textbox beperken - mask

[PdeBie]

Hoi allen,

ik heb een input veld op een formulier en hier mogen de gebruikers enkel cijfers invullen. Maximaal 4 om precies te zijn.

Ik ben gaan Googlen en liep tegen deze plugin aan:
http://digitalbush.com/projects/masked-input-plugin/

Dit toegepast en dat leidt tot deze code: http://jsfiddle.net/8kFkN/
Uiteraard nog wat validatie erop (zowel client als server side), zodat je ook echt maar 4 cijfers krijgt.

Maar nu het probleem. Als gebruiker met de muis op het veld klikt, kan het zijn dat de cursor op de laatste positie staat. Begint hij vervolgens met typen gebeurt er niets, want de cursor staat op het eind. Een 'normaal' gebruiker zou met de pijltjes toetsen of met de muis de cursor aan het begin zetten, maar mijn eindgebruikers zijn van het niveau 'ga met de muis naar de rechterbovenhoek '

Iemand een idee hoe ik de cursor standaard aan het begin kan krijgen?

--edit--
ik zit erover na te denken om het mask gewoon te verwijderen (aangezien het geen functionele eis is) en de validatie gewoon zijn werk te laten doen, maar wil eerst kijken of hier misschien een oplossing voor is.

[ Voor 10% gewijzigd door PdeBie op 17-01-2013 09:42 ]

[diabolofan]

JavaScript:

$("#text1").click(function() 
{
    $("#text1").focus();
}); 

toevoegen werkt. Weet niet of je dat te hackerig vind?

Probleem daarbij is wel dat wanneer je het bijvoorbeeld het derde getal wilt veranderen, en je klikt daar in het veld dat hij dan ook naar het begin springt.

[ Voor 49% gewijzigd door diabolofan op 17-01-2013 10:46 ]

[418O2]

masks zijn echt een userexperience nightmare imo

je kan gewoon een maxlength definieren op een inputveld. Als je bij de blur() (verliezen van focus) een check bouwt of het een numerieke waarde is, ben je klaar.

code:

<input type='text' id='txtBox' maxlength='4' />
<script type='text/javascript'>
$(document).ready(function() {
$("#txtBox").blur(function(){ 
var myVal = $(this).val();
if(!IsNumeric(myVal)) {
alert('what? NO NUMBER?');
}
});
});
</script>

[ Voor 38% gewijzigd door 418O2 op 17-01-2013 10:46 ]

[PdeBie]

Mja, ik zat er zelf ook al mee. Dus ik heb even overlegd met de heren die onze eindgebruikers het meeste spreken en uiteindelijk hebben we besloten om het masker weg te halen en het gewoon met de validators (die er toch al op zaten) te controleren.

[TheNephilim]

Helaas nog niet zo goed ondersteund, maar voor de toekomst wel handig: http://www.w3schools.com/html/html5_form_input_types.asp

Gewoon type="number" en de browser regelt voor je dat er alleen nummers ingevuld kunnen worden. Uiteraard moet je dan nog steeds aan de server-side je input checken, maar het scheelt (straks) een boel JS.

[OkkE]

TheNephilim schreef op donderdag 17 januari 2013 @ 11:29:
Helaas nog niet zo goed ondersteund, maar voor de toekomst wel handig: http://www.w3schools.com/html/html5_form_input_types.asp

Gewoon type="number" en de browser regelt voor je dat er alleen nummers ingevuld kunnen worden. Uiteraard moet je dan nog steeds aan de server-side je input checken, maar het scheelt (straks) een boel JS.

In dit geval zou ik dan kiezen voor een pattern (regex), zodat je ook gelijk het aantal cijfers kan checken.
.

code:

<input type="text" value="" pattern="[0-9]{4}" required="">

Zie hier nog veel meer voorbeelden: http://html5pattern.com/

[TheNephilim]

OkkE schreef op vrijdag 18 januari 2013 @ 09:15:
[...]

In dit geval zou ik dan kiezen voor een pattern (regex), zodat je ook gelijk het aantal cijfers kan checken.
.

code:

<input type="text" value="" pattern="[0-9]{4}" required="">

Zie hier nog veel meer voorbeelden: http://html5pattern.com/

Haha, dat is toevallig, gisteren had ik nog het briljante idee om iets te doen als data-pattern="" om dat met JavaScript te gaan 'checken'

Het bestaat dus al, maar dan weer niet in alle browsers, dus terug vallen op JS is misschien geen gek idee.

Bedankt voor de link! ^^

[PdeBie]

is inderdaad iets om in de gaten te houden voor de toekomst, aangezien we hier nog geen HTML 5 gebruiken.

Heb het nu afgevangen met 'maxlength = 4' en een client- en server-side validatie.

[OkkE]

pdebie schreef op vrijdag 18 januari 2013 @ 10:12:
is inderdaad iets om in de gaten te houden voor de toekomst, aangezien we hier nog geen HTML 5 gebruiken.

Heb het nu afgevangen met 'maxlength = 4' en een client- en server-side validatie.

Je bedoelt dat jullie nog niet alle nieuwe HTML elementen (en attributen) gebruiken? Ik neem aan wel HTML5 Doctype?

Ik probeer zo veel mogelijk (waar van toepassing & toevoeging) de nieuwe features van HTML te gebruiken en dan waar nodig voor oudere browsers een Javascript fallback. Vooral de nieuwe input types zijn een uitkomst op mobiele apparaten.