Käyttäjät syöttävät puhelinnumeroita mitä erilaisimmilla tavoilla: jotkut aloittavat numerolla 8, toiset +7:llä, osa näppäilee numerot ilman välilyöntejä, toiset lisäävät välilyönnin jokaisen numeroparin jälkeen. Tietokannasta tulee sotku. Esimiehet tuhlaavat aikaa soitteluun, ja puolet numeroista paljastuu toimimattomiksi. Tuttu skenaario jokaiselle, joka on joskus lisännyt yhteydenottolomakkeen verkkosivustolle.

Syöttömaski ratkaisee tämän ongelman täysin: käyttäjä ei fyysisesti voi syöttää numeroa väärässä muodossa. Hän näppäilee numeroita, ja ne ilmestyvät automaattisesti oikeille paikoilleen samalla kun sulut ja väliviivat ilmestyvät itsestään. Ei virheitä, ei turhautumista.

Alla on neljä tapaa lisätä puhelinmaski syöttökenttään: natiivista HTML5-ratkaisusta ilman JavaScriptiä aina täysiveriseen kirjastoon, jossa on liput jokaiselle maalle. Mukana koodi, jonka voit kopioida ja liittää projektiisi.

💡 Pikakatsaus:

• Yksinkertaisin maski käyttää pattern-attribuuttia ja type="tel"-määritystä, ei lainkaan JavaScriptiä, toimii kaikissa selaimissa
• Jos tarvitset maan liput ja kansainvälisen muotoilun, käytä intl-tel-input-kirjastoa, GitHubin suosituinta ratkaisua
• Jos tarvitset yhden kirjaston puhelimille, päivämäärille, korteille ja kaikille muille maskeille, valitse IMask.js
• Jos haluat kirjoittaa maskin käsin ilman riippuvuuksia, pelkkä JavaScript hoitaa sen 30 rivillä

Mikä on syöttömaski ja miksi se on tärkeämpi kuin validointi

Syöttömaski on mallimerkkijono, joka hallitsee sitä, mitä käyttäjä näkee ja voi kirjoittaa lomakekenttään. Toisin kuin validointi, joka tarkistaa tiedot lähetyksen jälkeen ja näyttää virheen, maski toimii reaaliajassa kirjoituksen aikana: se estää kirjaimen kirjoittamisen numeron paikalle ja lisää automaattisesti sulut, väliviivat ja välilyönnit.

Ero on perustavanlaatuinen. Validointi sanoo "teit virheen", ja käyttäjä on jo turhautunut ja saattaa poistua. Maski ohjaa häntä askel askeleelta: virheet ovat yksinkertaisesti mahdottomia. Puhelinnumeroille tämä on kriittistä, koska muotoiluvaihtoehtoja on kymmeniä. Pelkkä venäläinen numero voidaan kirjoittaa muodossa +7 999 123-45-67, 8(999)1234567 tai +7(999)123-45-67, ja nämä ovat vain kolme varianttia monista. Ilman maskia jokainen käyttäjä keksii oman muotonsa, ja tietokanta muuttuu roskakasaksi.

Tapa 1: HTML5, type="tel" ja pattern

Helpoin reitti: ohita JavaScript kokonaan. Nykyaikaiset selaimet tukevat type="tel"-määritystä ja pattern-attribuuttia, joka validoi syötteen säännöllistä lauseketta vasten lomakkeen lähetyksen yhteydessä.

Lisää kenttä merkintääsi. Koodin voi lisätä mihin tahansa HTML-pohjaan: Contact Form 7 -lomakkeeseen, natiiviin WordPress-lomakkeeseen tai omaan merkintään.

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
>

Puretaan, mitä tässä tapahtuu. type="tel" näyttää mobiililaitteilla numeronäppäimistön tavallisen näppäimistön sijaan, mikä tekee puhelinnumeron syöttämisestä mukavampaa. pattern asettaa säännöllisen lausekkeen, joka sallii useita variantteja: välilyönneillä tai ilman, suuntanumeron ympärillä suluilla tai ilman. title näyttää työkaluvihjeen hiiren ollessa päällä, ja required estää lomakkeen lähettämisen tyhjällä kentällä.

Etu: nolla riippuvuutta, toimii kaikissa selaimissa. Yksinkertaiselle laskeutumissivulle tämä riittää.

Mutta tämä ei ole oikea maski. Sulut ja väliviivat eivät ilmesty automaattisesti; käyttäjän on kirjoitettava ne itse. pattern laukeaa vasta lomakkeen lähetyksessä. Jos tarvitset muotoilua reaaliajassa kirjoituksen aikana, siirry seuraaviin tapoihin.

Tapa 2: intl-tel-input, kansainvälinen muotoilu maan lipuilla

intl-tel-input on suosituin JavaScript-kirjasto puhelinsyötteelle. Se tarjoaa kentän, jossa on pudotusvalikko maan lipuista, automaattisen muotoilun kansallisen mallin mukaan sekä numeron validoinnin. Kesäkuussa 2026 kirjastolla on yli 7 800 tähteä GitHubissa, ja nykyinen versio on 29.

Asenna kirjasto npm:n kautta (npm i intl-tel-input) tai CDN:stä. Alla oleva koodi on tarkoitettu vanilla JavaScriptille; saatavilla on myös valmiita komponentteja Reactille, Vuelle, Angularille ja Sveltelle.

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>

Syöte-elementti ja alustus menevät siihen pohjaan, jossa tarvitset kentän. WordPress-teemassa lisää skripti wp_enqueue_script-funktiolla functions.php-tiedostossa ja sijoita merkintä sopivaan pohjaan.

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" asettaa Venäjän lipun oletukseksi. separateDialCode: true siirtää maakoodin syöttökentän ulkopuolelle: kun käyttäjä vaihtaa lippua, koodi lisätään automaattisesti. utilsScript lataa muotoiluapuohjelmat; ilman niitä kirjasto toimii edelleen, mutta numeroita ei muotoilla valitun maan mallin mukaisesti.

intlTelInput()-funktion palauttama olio tarjoaa useita hyödyllisiä metodeja. iti.getNumber() palauttaa numeron E.164-kansainvälisessä muodossa, iti.isValidNumber() tarkistaa kelpoisuuden ja iti.setNumber("9991234567") asettaa arvon ohjelmallisesti. Contact Form 7:ää varten tarvitset oman skriptin: etsi .wpcf7-tel-kenttä ja liitä siihen intlTelInput.

Etu: täydellinen kansainvälinen ratkaisu, jossa on automaattinen muotoilu, liput, validointi ja framework-integraatiot. Haitta: kirjasto painaa noin 40 kt (gzip), mikä on ylimitoitettua yksinkertaiselle laskeutumissivulle, jossa on yksi kenttä.

Tapa 3: IMask.js, universaali maski ilman jQueryä

IMask.js on kypsä maskikirjasto, joka on kirjoitettu pelkällä JavaScriptillä: ei jQueryä, ei muita riippuvuuksia. Se tukee maskeja puhelimille, päivämäärille, numeroille, valuutoille ja dynaamisille malleille. Se on kätevä, kun tarvitset erityyppisiä maskeja yhdellä sivustolla: puhelimen yhteydenottolomakkeessa, päivämäärän kalenterissa ja summan laskurissa. Nykyinen versio on 7.1.

Asenna npm:n kautta (npm i imask) tai sisällytä CDN:stä:

1
<script src="https://unpkg.com/imask"></script>

Puhelinmaski kolmella rivillä. Koodi voi olla <script>-tagissa footerissa tai erillisessä JS-tiedostossa teemassasi.

1
const phoneInput = document.getElementById('phone');
2
const maskOptions = {
3
  mask: '+{7} (000) 000-00-00'
4
};
5
IMask(phoneInput, maskOptions);

Maskin syntaksi: +{7} on kiinteä etuliite, jota käyttäjä ei voi muokata. 0 tarkoittaa mitä tahansa numeroa 0:sta 9:ään. Voit lisätä monimutkaisuutta: tee suuntanumerosta valinnainen tai vaihda maskia dynaamisesti maan vaihtuessa käyttämällä dispatch-parametria.

IMask palauttaa olion, josta pääsee käsiksi raaka-arvoon: maskRef.unmaskedValue antaa pelkät numerot 79991234567, juuri sen mitä haluat tallentaa tietokantaan. Metodi maskRef.value palauttaa muotoillun merkkijonon näyttöä varten. Klassinen ongelma on ratkaistu: numerot menevät backendille, kun käyttäjä näkee kauniisti muotoillun numeron.

Etu: yksi kirjasto kaikkiin tapauksiin, raaka-arvot suoraan laatikosta, ei riippuvuuksia. Haitta: yhdelle puhelinkentälle on helpompaa käyttää intl-tel-input-kirjastoa lippujen kanssa; IMask loistaa oikeasti lomakkeissa, joissa on kolmesta viiteen eri kenttätyyppiä.

Tapa 4: pelkkä JavaScript, itse tehty maski

Jos et halua vetää mukaan kirjastoa vain yhtä kenttää varten, kirjoita maski pelkällä JavaScriptillä. Alla oleva koodi käsittelee jokaisen näppäinpainalluksen ja lisää automaattisesti sulut ja väliviivat numeroiden syöttämisen yhteydessä.

Sijoita skripti samaan pohjaan, jossa syöttökenttä sijaitsee, tai sisällytä se erillisenä tiedostona. WordPressissä käytä wp_enqueue_script-funktiota true-lipulla (footerissa).

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
});

input-tapahtuma laukeaa jokaisessa kentän muutoksessa: liittäminen leikepöydältä, automaattikorjaus, poisto. Ensimmäinen rivi replace(/\D/g, '') poistaa kaiken paitsi numerot: kirjaimet ja erikoismerkit katoavat välittömästi. Sen jälkeen skripti katkaisee ylimääräiset numerot (venäläisessä numerossa on 11 numeroa maakoodi mukaan lukien) ja rakentaa muotoillun merkkijonon: maakoodi +7, kolminumeroinen suuntanumero suluissa, kolme numeroa, kaksi, kaksi, erotettuna väliviivoilla.

Ennen kuin käytät tätä live-sivustolla, lisää kaksi parannusta. Ensinnäkin: kun poistat numeroita numeron keskeltä, kursori saattaa hypätä kentän loppuun; tallenna kursorin paikka selectionStart-ominaisuuden avulla ja palauta se muotoilun jälkeen. Toiseksi: muiden maiden numeroille (Valko-Venäjällä on 12 numeroa, Kazakstanissa 11 numeroa eri koodilla) logiikka muuttuu monimutkaisemmaksi, ja siinä vaiheessa intl-tel-input on täysin perusteltu.

Etu: 30 riviä, täysi hallinta, nolla kilotavua riippuvuuksia. Haitta: maski on räätälöity yhteen muotoon; usean maan projekteissa koodi paisuu.

⁉️🤔 Usein kysytyt kysymykset

Miksi maski on parempi kuin pelkkä validointi?

Validointi laukeaa lomakkeen lähetyksen jälkeen: käyttäjä näkee virheen ja joutuu palaamaan korjaamaan sen. Maski toimii kirjoituksen aikana tehden virheellisestä muodosta fyysisesti mahdottoman. Vähemmän turhautumista, vähemmän hylättyjä lomakkeita. Puhelinnumeroille tämä on kriittistä: numerovirheet ovat yksi yleisimmistä syistä, miksi käyttäjät hylkäävät lomakkeen.

Miten tallennan pelkät numerot tietokantaan ilman sulkuja ja väliviivoja?

Kaikki tämän artikkelin kirjastot tarjoavat raaka-arvot: intl-tel-input-kirjastossa on getNumber()-metodi, joka palauttaa +79991234567, IMask.js-kirjastossa on unmaskedValue-ominaisuus, joka palauttaa 79991234567. Ennen tietojen lähettämistä palvelimelle nappaa raaka-arvo ja tallenna se. Näytä muotoiltu merkkijono vain käyttöliittymässä. WordPress-lomakkeissa lisää piilotettu kenttä <input type="hidden" name="phone_raw"> ja täytä se JavaScriptillä ennen lähetystä.

Toimiiko maski mobiililaitteilla?

Kyllä, kaikki neljä tapaa toimivat oikein iOS:lla ja Androidilla. type="tel" tuo esiin numeronäppäimistön, mikä on kätevää. Vanhemmilla Android-versioilla (alle 6) input-tapahtuma saattaa käyttäytyä eri tavalla automaattikorjauksen kanssa; testaa oikeilla laitteilla. intl-tel-input ja IMask.js ovat kehittäjiensä testaamia mobiiliselaimilla eivätkä aiheuta ongelmia.

Voinko käyttää maskia Contact Form 7:n kanssa?

CF7 luo kenttiä, joissa on .wpcf7-tel-luokka. Kirjoita skripti, joka etsii tämän kentän valitsimella ja liittää siihen intl-tel-input- tai IMask-kirjaston. Lomakkeen lähetyksessä CF7 ottaa arvon suoraan kentästä, joten kirjaston on ehdittävä muotoilla se etukäteen. Jos käytät raaka-arvoja, sieppaa wpcf7submit-tapahtuma ja korvaa data piilotetussa kentässä.

Mitä teen eri maiden numeroille samalla sivustolla?

Käytä intl-tel-input-kirjastoa: käyttäjä valitsee lipun, ja maski vaihtuu automaattisesti vastaamaan valitun maan muotoa. Geokohdennusta varten voit asettaa initialCountry: "auto", jolloin kirjasto tunnistaa maan IP:n perusteella ulkoisen palvelun kautta. Jos maita on vain kaksi tai kolme ja riippuvuusbudjettisi on minimaalinen, kirjoita kaksi maskia pelkällä JavaScriptillä ja vaihda niiden välillä "Venäjä / Kazakstan" -valintapainikkeella kentän yläpuolella.

Mikä tapa valita omaan tehtävääsi

Valinta kiteytyy kolmeen kysymykseen: kuinka monta kenttää sivustolla on, tarvitsetko maan liput ja kuinka kriittinen paketin koko on.

Yksi yksinkertainen lomake laskeutumissivulla: aloita HTML5 pattern-attribuutilla. Nopea, ei JavaScriptiä, ja mobiilissa näppäimistö vaihtuu numeronäppäimistöksi. Jos sivusto hyväksyy kansainvälisiä numeroita, intl-tel-input kattaa kaiken: liput, automaattisen muotoilun, validoinnin. Verkkokaupalle tai SaaS-palvelulle tämä on standardi.

Useita erilaisia maskeja sivustolla (puhelin, päivämäärä, summa, kortti): IMask.js antaa yhden API:n kaikille kentille eikä vaadi jQueryä. Rakennat harrastusprojektia ja haluat täyden hallinnan: 30 riviä pelkkää JavaScriptiä hoitaa venäläiset numerot ilman ainuttakaan riippuvuutta.

Testaa, miten maski toimii live-sivustolla: syötä numero, jossa on kirjaimia, liitä leikepöydältä, kokeile poistaa pari numeroa keskeltä. Kentän tulee käyttäytyä ennustettavasti kaikissa skenaarioissa. Minkä tavan valitsit projektiisi? Jaa kommenteissa.