Share
In deze tutorial leer je hoe je real-time, gebruikersinvoer opmaakt in een formulierveld. Als een gebruiker iets in een invoerveld typt, wordt de waarde automatisch aangepast, waarbij dingen zoals interpunctie en streepjes worden toegevoegd, spaties worden getrimd, onverwachte tekens worden verwijderd en het woordomhulsel wordt gewijzigd..
Deze aanpak kan gebruikers enorm helpen bij het invoeren van formuliergegevens. Het maakt het proces eenvoudiger, minimaliseert fouten, geeft feedback en verbetert over het algemeen de gebruikerservaring.
We zullen twee voorbeelden verkennen, met behulp van jQuery voor de API's, methoden en hulpprogramma's om het schrijven van de code handiger en intuïtiever te maken. Het hebben van een basiskennis van jQuery zal helpen, hoewel je moet kunnen begrijpen wat er aan de hand is, ook al doe je dat niet. Laten we beginnen!
Bekijk de startpen, vork deze en volg hem. Het bevat een tekst invoerveld, met enkele stijlen om het presentabel te maken. Het tabblad JS is leeg, maar jQuery is al toegevoegd aan de en is klaar om te gaan!
En zoals u hieronder kunt zien, verwacht onze input een som geld. Dit soort invoerveld is meestal te vinden in een bank-, betalingsverwerker- of valuta-wisselformulier.
Er zijn twee problemen die ik vaak ben tegengekomen met dit type invoer:
Om de invoerwaarde te formatteren, selecteren we de invoer element, toewijzen van het resultaat aan een variabele.
Accentsconagua
var $ form = $ ("#form"); var $ input = $ form.find ("input");Dan bevestigen we de keyup evenement naar onze inbreng; een functie afvuren wanneer de gebruiker op drukt en vervolgens een klaviertoets loslaat.
$ input.on ("keyup", functie (event) // 1. var selection = window.getSelection (). toString (); if (selection! == ") return; // 2. if ($ .inArray (event.keyCode, [38,40,37,39])! == -1) return;);Binnen deze functie voegen we ook een paar regel code toe. Deze extra regels voorkomen dat de functie wordt uitgevoerd als de gebruiker
In beide scenario's wordt geen nieuw karakter toegevoegd, dus het is niet nodig om door te gaan met het uitvoeren van de functie.
Vervolgens voegen we nog het volgende toe, nog steeds binnen onze functie, onder de sectie die voorkomt dat de pijltjestoetsen de functie uitvoeren. Dit is de hoofdfunctie die de waarde zal opmaken.
// 1 var $ this = $ (this); var input = $ this.val (); // 2 var input = input.replace (/ [\ D \ s \ ._ \ -] + / g, ""); // 3 invoer = invoer? parseInt (invoer, 10): 0; // 4 $ this.val (function () return (input === 0)? "": Input.toLocaleString ("en-US"););Deze regels voeren het volgende uit:
parseInt () functie om ervoor te zorgen dat de waarde een is geheel getal (een rond getal).toLocaleString () functie, geef de gedesinfecteerde waarde vervolgens door aan het invoerelement.Notitie: Het scheidingsteken kan dat zijn , of . afhankelijk van de landcode die is doorgegeven in de toLocaleString () functie. Duitse, de-DE, en Indonesië, ik deed, gebruik bijvoorbeeld . in plaats van ,.
Probeer de demo eens uit!
Terwijl u op de invoer typt, moet u zien dat letters en speciale tekens (zoals streepjes en punten) onmiddellijk worden verwijderd. U kunt alleen een nummer invoeren. Het duizendscheidingsteken wordt automatisch toegevoegd.
Een ander type invoer waar het zinvol is om deze aanpak toe te passen is het "licentienummer"invoer. Het licentienummer of de aankoopcode van Envato Market is bijvoorbeeld 36 tekens lang en bestaat uit letters, cijfers en een paar streepjes. Het correct invoeren ervan op de websites van auteurs is van vitaal belang als je ondersteuning nodig hebt!
Van waar is mijn koopcode?U kunt dit soort invoer ook vinden in een premium WordPress-thema of -plug-in, waarbij u een licentiecode moet invoeren om updates te ontvangen of bepaalde functies te gebruiken.
In dit tweede voorbeeld hebben we een invoerveld gemaakt met een plaatsaanduidingstekst die verwijst naar het licentienummer. En zoals u hieronder kunt zien, bevat het licentienummer 32 tekens met verschillende streepjes ertussen en moet elk teken een hoofdletter zijn.
Dit is de startpen; vork het en volg het mee!
We delen dezelfde codebase als ons eerste voorbeeld, behalve de hoofdfunctie.
// 1 var $ this = $ (this); var input = $ this.val (); // 2 input = input.replace (/ [\ W \ s \ ._ \ -] + / g, "); // 3 var splitsen = 4; var chunk = []; for (var i = 0, len = input.length; i < len; i += split) split = ( i >= 8 && i <= 16 ) ? 4 : 8; chunk.push( input.substr( i, split ) ); // 4 $this.val(function() return chunk.join("-").toUpperCase(); ); De hoofdfunctie, in dit geval:
Onze invoercode invoer is nu klaar! Geef het een kans:
Bekijk deze demo van Donnie D'Amato - een input voor opmaakdata:
Bedankt Donnie!
In deze zelfstudie hebben we twee voorbeelden doorlopen van het automatisch formatteren van gebruikersinvoer, waardoor onze gebruikers een meer naadloze ervaring hebben.
Deze aanpak is van toepassing op elk type tekstinvoer. U kunt het bijvoorbeeld toepassen op een "gebruikersnaam" -invoer om ervoor te zorgen dat alle letters in kleine letters zijn en alleen letters bevatten. U kunt het ook gebruiken om een "Eerste en laatste naam" -invoer op te maken, zodat de eerste letter een hoofdletter is.
Als het aankomt op het indienen van het formulier en het op juiste wijze saneren van de gegevens, neem dan contact op met uw vriendelijke back-end ontwikkelaars.
