📱 Telefonisisendi mask JavaScriptis: 4 meetodit koos koodiga
Kasutajad sisestavad telefoninumbreid igat moodi: mõni alustab numbriga 8, mõni +7, mõni trükib numbrid ilma tühikuteta, teine lisab tühikud iga numbripaari järele. Andmebaas muutub segapudruks. Haldurid raiskavad aega helistades ja pooled numbrid osutuvad katkisteks. Tuttav stsenaarium kõigile, kes on kunagi lisanud veebisaidile kontaktivormi.
Sisestusmask lahendab selle probleemi täielikult: kasutaja ei saa füüsiliselt numbrit vales formaadis sisestada. Ta trükib numbreid ja need ilmuvad automaatselt õigetesse kohtadesse, samal ajal kui sulud ja sidekriipsud tekivad ise. Ei mingeid vigu, ei mingit frustratsiooni.
Allpool on neli võimalust telefonimaski lisamiseks sisestusväljale: alates natiivsest HTML5-st ilma JavaScriptita kuni täisfunktsionaalse teegini koos lippudega iga riigi jaoks. Koos koodiga, mida saad oma projekti kopeerida ja kleepida.
💡 Kiirülevaade:
- Lihtsaim mask kasutab atribuuti
patternjatype="tel", ei mingit JavaScripti, töötab igas brauseris - Kui vajad riigilippe ja rahvusvahelist vormingut, kasuta
intl-tel-input, kõige populaarsemat lahendust GitHubis - Kui vajad ühte teeki telefonide, kuupäevade, kaartide ja muude maskide jaoks, vali
IMask.js - Kui soovid maski käsitsi kirjutada ilma sõltuvusi lisamata, saab puhas JavaScript sellega hakkama 30 reaga
Mis on sisestusmask ja miks see on olulisem kui valideerimine
Sisestusmask on mallistring, mis kontrollib, mida kasutaja vormiväljal näeb ja trükkida saab. Erinevalt valideerimisest, mis kontrollib andmeid pärast saatmist ja näitab viga, töötab mask reaalajas sisestamise ajal: see takistab tähe trükkimist sinna, kus peaks olema number, ning lisab automaatselt sulud, sidekriipsud ja tühikud.
Erinevus on põhimõtteline. Valideerimine ütleb: „sa tegid vea" ja kasutaja on juba pettunud ning võib lahkuda. Mask juhendab teda samm-sammult: vead on lihtsalt võimatud. Telefoninumbrite puhul on see kriitiline, sest vormindamisvõimalusi on kümneid. Ainuüksi Vene numbrit võib kirjutada kui +7 999 123-45-67, kui 8(999)1234567 või kui +7(999)123-45-67 ja need on vaid kolm varianti paljudest. Ilma maskita mõtleb iga kasutaja välja oma formaadi ja andmebaas muutub prügimäeks.
Meetod 1: HTML5, type="tel" ja pattern
Lihtsaim tee: jäta JavaScript täielikult vahele. Kaasaegsed brauserid toetavad type="tel" ja atribuuti pattern, mis valideerib sisestuse regulaaravaldise alusel vormi saatmisel.
Lisa väli oma märgendisse. Koodi saab lisada igasse HTML-malli: Contact Form 7, natiivne WordPressi vorm või kohandatud märgend.
1 <input 2 type="tel" 3 id="phone" 4 name="phone" 5 pattern="\+7\s?[\(]?\d{3}[\)]?\s?\d{3}[\-]?\d{2}[\-]?\d{2}" 6 placeholder="+7 (999) 123-45-67" 7 title="Enter the number in the format +7 (999) 123-45-67" 8 required 9 >
Vaatame, mis siin toimub. type="tel" kuvab mobiilseadmetes tavalise klaviatuuri asemel numbriklaviatuuri, muutes telefoni sisestamise mugavamaks. pattern määrab regulaaravaldise, mis lubab mitut varianti: tühikutega või ilma, suunakoodi ümber sulgudega või ilma. title näitab hõljumisel vihjet ja required takistab vormi saatmist tühja väljaga.
Eelis: null sõltuvust, töötab igas brauseris. Lihtsa maandumislehe jaoks on see piisav.
Kuid see pole tõeline mask. Sulud ja sidekriipsud ei ilmu automaatselt, kasutaja peab need käsitsi sisestama. pattern käivitub ainult vormi saatmisel. Kui vajad vormindamist reaalajas sisestamise ajal, liigu järgmiste meetodite juurde.
Meetod 2: intl-tel-input, rahvusvaheline formaat koos riigilippudega
intl-tel-input on kõige populaarsem JavaScripti teek telefonisisestuse jaoks. See pakub välja koos riigilippude rippmenüüga, automaatse vormindamise vastavalt riiklikule mallile ja numbri valideerimise. 2026. aasta juuni seisuga on teegil GitHubis üle 7800 tähe ja praegune versioon on 29.
Paigalda teek npm-i (npm i intl-tel-input) või CDN-i kaudu. Allolev kood on vanilla JavaScripti jaoks; olemas on ka valmiskomponendid Reacti, Vue, Angularile ja Svelte'ile.
1 <!-- In the <head> of the page --> 2 <link 3 rel="stylesheet" 4 href="https://cdn.jsdelivr.net/npm/intl-tel-input@29/build/css/intlTelInput.css" 5 > 6 <script src="https://cdn.jsdelivr.net/npm/intl-tel-input@29/build/js/intlTelInput.min.js"></script>
Sisestuselement ja initsialiseerimine lähevad malli, kus väli asub. WordPressi teema puhul lisa skript wp_enqueue_script kaudu failis functions.php ja paiguta märgend sobivasse malli.
1 <input type="tel" id="phone"> 2 3 <script> 4 const input = document.querySelector("#phone"); 5 const iti = intlTelInput(input, { 6 initialCountry: "ru", 7 separateDialCode: true, 8 utilsScript: "https://cdn.jsdelivr.net/npm/intl-tel-input@29/build/js/utils.js" 9 }); 10 </script>
initialCountry: "ru" seab vaikimisi Vene lipu. separateDialCode: true liigutab riigikoodi sisestusväljast väljapoole: kui kasutaja lippu vahetab, sisestatakse kood automaatselt. utilsScript laadib vormindamise utiliidid; ilma nendeta teek siiski töötab, kuid numbreid ei vormindata valitud riigi mustri järgi.
intlTelInput() tagastatud objekt pakub mitmeid kasulikke meetodeid. iti.getNumber() tagastab numbri E.164 rahvusvahelises formaadis, iti.isValidNumber() kontrollib kehtivust ja iti.setNumber("9991234567") määrab väärtuse programselt. Contact Form 7 jaoks vajad kohandatud skripti: leia .wpcf7-tel väli ja kinnita sellele intlTelInput.
Eelis: täielik rahvusvaheline lahendus koos automaatse vormindamise, lippude, valideerimise ja raamistikuintegratsioonidega. Puudus: teek kaalub umbes 40 KB (gzip), mis on üleliigne lihtsa ühe väljaga maandumislehe jaoks.
Meetod 3: IMask.js, universaalne mask ilma jQueryta
IMask.js on küps maskimisteek, mis on kirjutatud puhtas JavaScriptis: ei jQueryt ega muid sõltuvusi. See toetab maske telefonidele, kuupäevadele, numbritele, valuutadele ja dünaamilistele mallidele. See tuleb kasuks, kui vajad ühel saidil erinevat tüüpi maske: telefoni kontaktivormis, kuupäeva kalendris ja summat kalkulaatoris. Praegune versioon on 7.1.
Paigalda npm-i kaudu (npm i imask) või lisa CDN:
1 <script src="https://unpkg.com/imask"></script>
Telefonimask kolme reaga. Kood võib minna jaluses olevasse <script> silti või eraldi JS-faili oma teemas.
1 const phoneInput = document.getElementById('phone'); 2 const maskOptions = { 3 mask: '+{7} (000) 000-00-00' 4 }; 5 IMask(phoneInput, maskOptions);
Maski süntaks: +{7} on fikseeritud prefiks, mida kasutaja muuta ei saa. 0 tähistab suvalist numbrit 0 kuni 9. Saad lisada keerukust: muuta suunakood valikuliseks või dünaamiliselt maski vahetada, kui riik muutub, kasutades parameetrit dispatch.
IMask tagastab objekti koos juurdepääsuga töötlemata väärtusele: maskRef.unmaskedValue annab sulle paljad numbrid 79991234567, täpselt see, mida soovid andmebaasi salvestada. Meetod maskRef.value tagastab vormindatud stringi kuvamiseks. Klassikaline probleem on lahendatud: numbrid lähevad backend'i, samal ajal kui kasutaja näeb kenasti vormindatud numbrit.
Eelis: üks teek kõigiks juhtudeks, töötlemata väärtused kohe karbist võttes, sõltuvused puuduvad. Puudus: üheainsa telefonivälja jaoks on lihtsam kasutada lippudega intl-tel-input; IMask särab tõeliselt vormidel, kus on kolm kuni viis erinevat väljatüüpi.
Meetod 4: puhas JavaScript, käsitsi tehtud mask
Kui sa ei soovi ühe välja pärast teeki lisada, kirjuta mask puhtas JavaScriptis. Allolev kood käsitleb iga klahvivajutust ja lisab numbrite sisestamisel automaatselt sulud ja sidekriipsud.
Paiguta skript samasse malli, kus sisestusväli asub, või lisa see eraldi failina. WordPressi puhul kasuta wp_enqueue_script koos lipuga true (jaluses).
1 document.getElementById('phone').addEventListener('input', function (e) { 2 let value = e.target.value.replace(/\D/g, ''); 3 4 if (value.length > 11) { 5 value = value.slice(0, 11); 6 } 7 8 let formatted = '+7 ('; 9 if (value.length > 1) formatted += value.slice(1, 4); 10 if (value.length > 4) formatted += ') ' + value.slice(4, 7); 11 if (value.length > 7) formatted += '-' + value.slice(7, 9); 12 if (value.length > 9) formatted += '-' + value.slice(9, 11); 13 14 e.target.value = formatted; 15 });
Sündmus input käivitub igal välja muutusel: lõikepuhvrist kleepimine, automaatparandus, kustutamine. Esimene rida replace(/\D/g, '') eemaldab kõik peale numbrite: tähed ja erimärgid kaovad koheselt. Seejärel kärbib skript üleliigsed numbrid (Vene number on 11 numbrit koos riigikoodiga) ja ehitab vormindatud stringi: riigikood +7, kolmekohaline suunakood sulgudes, kolm numbrit, kaks, kaks, eraldatuna sidekriipsudega.
Enne selle kasutamist reaalsel saidil lisa kaks täiendust. Esiteks: numbri keskelt numbrite kustutamisel võib kursor hüpata välja lõppu; salvesta kursori asukoht selectionStart abil ja taasta see pärast vormindamist. Teiseks: teiste riikide numbrite puhul (Valgevenel on 12 numbrit, Kasahstanil 11 numbrit erineva koodiga) muutub loogika keerukamaks ja sel hetkel on intl-tel-input täielikult õigustatud.
Eelis: 30 rida, täielik kontroll, null kilobaiti sõltuvusi. Puudus: mask on kohandatud ühele formaadile; mitut riiki hõlmavate projektide puhul läheb kood puhuma.
⁉️🤔 Korduma kippuvad küsimused
Miks on mask parem kui lihtne valideerimine?
Valideerimine käivitub pärast vormi saatmist: kasutaja näeb viga ja peab minema tagasi seda parandama. Mask töötab sisestamise ajal, muutes vale formaadi füüsiliselt võimatuks. Vähem frustratsiooni, vähem pooleli jäetud vorme. Telefoninumbrite puhul on see kriitiline: vead numbris on üks levinumaid põhjusi, miks kasutajad vormi pooleli jätavad.
Kuidas salvestada paljad numbrid andmebaasi ilma sulgude ja sidekriipsudeta?
Kõik selles artiklis mainitud teegid pakuvad töötlemata väärtusi:
intl-tel-inputmeetodgetNumber()tagastab+79991234567,IMask.jsatribuutunmaskedValuetagastab79991234567. Enne andmete serverisse saatmist haara töötlemata väärtus ja salvesta see. Vormindatud stringi näita ainult kasutajaliideses. WordPressi vormides lisa peidetud väli<input type="hidden" name="phone_raw">ja täida see JavaScripti abil enne saatmist.
Kas mask töötab mobiilseadmetes?
Jah, kõik neli meetodit töötavad korrektselt iOS-is ja Androidis.
type="tel"toob esile numbriklaviatuuri, mis on mugav. Vanematel Androididel (versioonid alla 6) võib sündmusinputautomaatparandusega käituda erinevalt; testi reaalsetel seadmetel.intl-tel-inputjaIMask.json nende arendajate poolt mobiilibrauserites testitud ega tekita probleeme.
Kas ma saan maski kasutada koos Contact Form 7-ga?
CF7 genereerib väljad klassiga
.wpcf7-tel. Kirjuta skript, mis leiab selle välja selektori järgi ja kinnitab selleleintl-tel-inputvõiIMask. Vormi saatmisel võtab CF7 väärtuse otse väljalt, seega peab teek jõudma selle eelnevalt vormindada. Kui kasutad töötlemata väärtusi, püüa kinni sündmuswpcf7submitja asenda andmed peidetud väljas.
Mida teha erinevate riikide numbritega samal saidil?
Kasuta
intl-tel-input: kasutaja valib lipu ja mask lülitub automaatselt valitud riigi formaadile vastavaks. Geosihtimise jaoks võid määratainitialCountry: "auto"ja teek tuvastab riigi IP järgi välise teenuse kaudu. Kui riike on ainult kaks või kolm ja sinu sõltuvuste eelarve on minimaalne, kirjuta puhtas JavaScriptis kaks maski ja lülita nende vahel välja kohal oleva „Venemaa / Kasahstan" raadionupuga.
Milline meetod oma ülesande jaoks valida
Valik taandub kolmele küsimusele: kui palju välju saidil on, kas vajad riigilippe ja kui kriitiline on paki suurus.
Üks lihtne vorm maandumislehel: alusta HTML5 pattern-iga. Kiire, ilma JavaScriptita ja mobiilis lülitub klaviatuur numbrirežiimi. Kui sait võtab vastu rahvusvahelisi numbreid, katab intl-tel-input kõik: lipud, automaatse vormindamise, valideerimise. Veebipoe või SaaS-i jaoks on see standard.
Mitu erinevat maski saidil (telefon, kuupäev, summa, kaart): IMask.js annab sulle ühe API kõigi väljade jaoks ega vaja jQueryt. Ehitad isiklikku projekti ja soovid täielikku kontrolli: 30 rida puhast JavaScripti lahendab Vene numbrid ilma ühegi sõltuvuseta.
Testi, kuidas mask reaalsel saidil töötab: sisesta number koos tähtedega, kleebi lõikepuhvrist, proovi kustutada paar numbrit keskelt. Väli peaks igas stsenaariumis käituma etteaimatavalt. Millise meetodi sa oma projekti jaoks valisid? Jaga kommentaarides.
Professionaalne kirjanike ja toimetajate meeskond, kes on spetsialiseerunud kvaliteetse sisu loomisele.