Share
În acest tutorial veți învăța cum să formatați, în timp real, intrarea utilizatorilor într-un câmp de formular. Pe măsură ce un utilizator introduce ceva într-un câmp de introducere, valoarea va fi ajustată automat, adăugând lucruri precum punctuația și liniuțele, tăierea spațiilor, eliminarea caracterelor neașteptate și modificarea caracterelor.
Această abordare poate facilita foarte mult utilizatorii atunci când introduc datele formularului. Ea facilitează procesul, minimizează erorile, oferă feedback și, în general, îmbunătățește experiența utilizatorului.
Vom explora două exemple, folosind jQuery pentru API-uri, metode și utilitare, pentru a face codul mai convenabil și mai intuitiv. Având o înțelegere de bază a jQuery va ajuta, deși ar trebui să puteți înțelege ce se întâmplă chiar dacă nu faceți asta. Sa incepem!
Verificați stiloul de pornire, lăsați-l și urmați-l. Conține a text câmp de intrare, cu unele stiluri pentru a fi prezentabil. Fila JS este goală, dar deja a fost adăugată jQuery la și este gata să plece!
Și după cum puteți vedea mai jos, contribuția noastră se așteaptă la o sumă de bani. Acest tip de câmp de intrare poate fi găsit, de obicei, într-un formular bancar, procesor de plată sau formă de schimb valutar.
Există două probleme pe care le-am întâlnit frecvent cu acest tip de intrare:
Pentru a începe formatarea valorii de intrare, selectăm intrare element, atribuind rezultatul unei variabile.
Accentsconagua
var $ form = $ ("#form"); var $ input = $ form.find ("intrare");Apoi atașăm keyup evenimentul nostru; arderea unei funcții atunci când utilizatorul apasă apoi eliberează o tastă de tastatură.
$ input.on ("keyup", functie (eveniment) // 1. var selectie = window.getSelection () toString (); if (select! == " .inArray (event.keyCode, [38,40,37,39])! == -1) return;);În cadrul acestei funcții adăugăm și câteva linii de cod. Aceste linii suplimentare împiedică funcționarea funcției când utilizatorul
În ambele scenarii nu se adaugă niciun caracter nou, deci nu este necesar să se continue executarea funcției.
În continuare, în cadrul funcției noastre, sub secțiunea de prevenire a tastelor săgeți de la executarea funcției, adăugăm următoarele. Aceasta este funcția principală care va formata valoarea.
// 1 var $ this = $ (acest lucru); var introducere = $ this.val (); // 2 var input = input.replace (/ [\ D \ s \ ._ \ -] + / g, ""); // 3 intrare = intrare? parseInt (intrare, 10): 0; // 4 $ this.val (funcția () return (input === 0)? "": Input.toLocaleString ("en-US"););Aceste linii efectuează următoarele:
parseInt () pentru a vă asigura că valoarea este o valoare întreg (un număr rotund).toLocaleString () funcția, apoi treceți valoarea dezinfectată înapoi la elementul de intrare.Notă: Separatorul poate fi fie , sau . în funcție de codul de țară transmis în toLocaleString () funcţie. limba germana, de-DE, și Indonezia, am facut, de exemplu, utilizarea . in loc de ,.
Dați demo-ului o încercare!
Pe măsură ce tastați pe intrare, trebuie să găsiți că literele și caracterele speciale (precum liniuța și punctul) vor fi eliminate imediat. Veți putea introduce numai un număr. Se va adăuga automat separatorul de mii.
Un alt tip de intrare în cazul în care este logic să se aplice această abordare este "numărul licenței"intrare. Numărul licenței Envato Market sau codul de achiziție, de exemplu, este de 36 de caractere și cuprinde litere, numere și câteva liniuțe. Introducerea corectă pe site-urile autorilor este vitală dacă aveți nevoie de asistență!
De unde este codul meu de cumpărare?Puteți găsi, de asemenea, acest tip de intrare într-o temă WordPress premium sau un plugin, în care trebuie să introduceți un cod de licență pentru a primi actualizări sau pentru a utiliza anumite caracteristici.
În acest al doilea exemplu, am creat un câmp de introducere, cu un text de substituire care indică formatul numărului de licență. Și după cum puteți vedea mai jos, numărul licenței cuprinde 32 de caractere cu mai multe întreruperi, iar fiecare caracter trebuie să fie capitalizat.
Iată stiloul de pornire; dați-i și urmați!
Vom împărtăși aceeași bază de coduri ca primul exemplu, cu excepția funcției principale.
// 1 var $ this = $ (acest lucru); var introducere = $ this.val (); // var = 0, varianta var = 0, varianta var = 0; = 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(); ); Funcția principală, în acest caz:
Numărul nostru de licență este acum pregătit! Încearcă:
Check out această demonstrație de către Donnie D'Amato - o intrare pentru datele de formatare:
Mulțumesc lui Donnie!
În acest tutorial am parcurs două exemple de formatare automată a informațiilor utilizatorilor, oferind utilizatorilor noștri o experiență mai bună.
Această abordare se aplică pentru orice tip de introducere de text. Ați putea, de exemplu, să o aplicați la o intrare "nume de utilizator" pentru a vă asigura că toate literele sunt litere mici și conțin numai litere. Puteți, de asemenea, să o utilizați pentru a formata o intrare "First and Last Name", asigurându-vă că prima literă este capitalizată.
Când vine vorba de prezentarea formularului și corectarea datelor în mod corespunzător, vă rugăm să luați legătura cu dezvoltatorii dvs. back-end prietenoși.
