Brukere skriver inn telefonnumre på alle mulige måter: noen starter med 8, andre med +7, noen taster sifre uten mellomrom, andre legger inn mellomrom etter hvert sifferpar. Databasen ender opp som et rot. Ledere kaster bort tid på å ringe, og halvparten av numrene viser seg å være ubrukelige. Et velkjent scenario for alle som noen gang har lagt til et kontaktskjema på et nettsted.

En inndatamaske løser dette problemet fullstendig: brukeren kan fysisk ikke skrive inn et nummer i feil format. De taster sifre, og disse sifrene havner automatisk på riktig plass mens parenteser og bindestreker dukker opp av seg selv. Ingen feil, ingen frustrasjon.

Nedenfor finner du fire måter å legge til en telefonmaske på et inndatafelt: fra ren HTML5 uten JavaScript til et fullverdig bibliotek med flagg for alle land. Med kode du kan kopiere og lime inn i prosjektet ditt.

💡 Rask oversikt:

• Den enkleste masken bruker pattern-attributtet og type="tel", ingen JavaScript i det hele tatt, fungerer i alle nettlesere
• Trenger du landsflagg og internasjonal formatering, bruk intl-tel-input, den mest populære løsningen på GitHub
• Trenger du ett bibliotek for telefoner, datoer, kort og alle andre masker, gå for IMask.js
• Vil du skrive en maske for hånd uten å dra inn avhengigheter, kan ren JavaScript gjøre det på 30 linjer

Hva er en inndatamaske og hvorfor den betyr mer enn validering

En inndatamaske er en malstreng som kontrollerer hva brukeren ser og kan skrive i et skjemafelt. I motsetning til validering, som sjekker data etter innsending og viser en feil, fungerer en maske i sanntid under inntasting: den forhindrer at man skriver en bokstav der et siffer skal være, og setter automatisk inn parenteser, bindestreker og mellomrom.

Forskjellen er fundamental. Validering sier «du gjorde en feil», og brukeren er allerede frustrert og kan finne på å forlate siden. En maske veileder dem steg for steg: feil er rett og slett umulige. For telefonnumre er dette kritisk fordi det finnes dusinvis av formateringsalternativer. Bare et russisk nummer kan skrives som +7 999 123-45-67, som 8(999)1234567 eller som +7(999)123-45-67, og dette er bare tre varianter av mange. Uten en maske finner hver bruker opp sitt eget format, og databasen blir en søppelhaug.

Metode 1: HTML5, type="tel" og pattern

Den enkleste veien: dropp JavaScript helt. Moderne nettlesere støtter type="tel" og pattern-attributtet, som validerer inndata mot et regulært uttrykk ved innsending av skjema.

Legg til feltet i markeringen din. Koden kan settes inn i enhver HTML-mal: Contact Form 7, et vanlig WordPress-skjema eller tilpasset markering.

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
>

La oss bryte ned hva som skjer her. type="tel" viser et numerisk tastatur på mobile enheter i stedet for det vanlige tastaturet, noe som gjør det mer praktisk å taste inn telefonnumre. pattern setter et regulært uttrykk som tillater flere varianter: med eller uten mellomrom, med eller uten parenteser rundt retningsnummeret. title viser et verktøytips ved hover, og required forhindrer innsending av skjemaet med et tomt felt.

Fordelen: null avhengigheter, fungerer i alle nettlesere. For en enkel landingsside er dette nok.

Men dette er ikke en ekte maske. Parenteser og bindestreker dukker ikke opp automatisk; brukeren må skrive dem manuelt. pattern utløses bare ved innsending av skjema. Hvis du trenger formatering i sanntid under inntasting, gå videre til de neste metodene.

Metode 2: intl-tel-input, internasjonalt format med landsflagg

intl-tel-input er det mest populære JavaScript-biblioteket for telefoninndata. Det gir et felt med en nedtrekksliste med landsflagg, autoformatering for å matche den nasjonale malen og nummervalidering. Per juni 2026 har biblioteket over 7 800 stjerner på GitHub, og gjeldende versjon er 29.

Installer biblioteket via npm (npm i intl-tel-input) eller CDN. Koden nedenfor er for vanilje JavaScript; det finnes også ferdige komponenter for React, Vue, Angular og Svelte.

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>

Inndataelementet og initialiseringen plasseres i malen der du trenger feltet. For et WordPress-tema legger du til skriptet via wp_enqueue_script i functions.php, og plasserer markeringen i den aktuelle malfilen.

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" setter det russiske flagget som standard. separateDialCode: true flytter landkoden utenfor inndatafeltet: når brukeren endrer flagg, settes koden inn automatisk. utilsScript laster inn formateringsverktøy; uten dem fungerer biblioteket fortsatt, men numre blir ikke formatert for å matche det valgte landets mønster.

Objektet som returneres av intlTelInput() gir flere nyttige metoder. iti.getNumber() returnerer nummeret i E.164 internasjonalt format, iti.isValidNumber() sjekker gyldighet, og iti.setNumber("9991234567") setter verdien programmatisk. For Contact Form 7 trenger du et tilpasset skript: finn .wpcf7-tel-feltet og knytt intlTelInput til det.

Fordel: en komplett internasjonal løsning med autoformatering, flagg, validering og rammeverkintegrasjoner. Ulempe: biblioteket veier rundt 40 KB (gzip), noe som er overkill for en enkel landingsside med ett felt.

Metode 3: IMask.js, en universell maske uten jQuery

IMask.js er et modent maskebibliotek skrevet i ren JavaScript: ingen jQuery, ingen andre avhengigheter. Det støtter masker for telefoner, datoer, numre, valutaer og dynamiske maler. Det er nyttig når du trenger ulike typer masker på ett nettsted: en telefon i et kontaktskjema, en dato i en kalender og et beløp i en kalkulator. Gjeldende versjon er 7.1.

Installer via npm (npm i imask) eller inkluder CDN:

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

En telefonmaske på tre linjer. Koden kan plasseres i en <script>-tagg i bunnteksten eller i en separat JS-fil i temaet ditt.

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

Maskesyntaks: +{7} er et fast prefiks som brukeren ikke kan redigere. 0 står for et hvilket som helst siffer fra 0 til 9. Du kan legge til kompleksitet: gjøre retningsnummeret valgfritt eller dynamisk bytte maske når landet endres ved hjelp av dispatch-parameteren.

IMask returnerer et objekt med tilgang til råverdien: maskRef.unmaskedValue vil gi deg rene sifre 79991234567, akkurat det du ønsker å lagre i databasen. Metoden maskRef.value returnerer den formaterte strengen for visning. Det klassiske problemet er løst: sifre går til backend, mens brukeren ser et pent formatert nummer.

Fordel: ett bibliotek for alle tilfeller, råverdier ut av boksen, ingen avhengigheter. Ulempe: for et enkelt telefonfelt er det enklere å bruke intl-tel-input med flagg; IMask skinner virkelig på skjemaer med tre til fem forskjellige felttyper.

Metode 4: ren JavaScript, en håndlaget maske

Hvis du ikke vil dra inn et bibliotek for bare ett felt, skriv masken i ren JavaScript. Koden nedenfor håndterer hvert tastetrykk og setter automatisk inn parenteser og bindestreker etter hvert som sifre tastes inn.

Plasser skriptet i samme mal som inndatafeltet er plassert, eller inkluder det som en separat fil. For WordPress, bruk wp_enqueue_script med true-flagget (i bunnteksten).

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-hendelsen utløses ved hver endring i feltet: liming fra utklippstavlen, autokorrektur, sletting. Den første linjen replace(/\D/g, '') fjerner alt unntatt sifre: bokstaver og spesialtegn forsvinner umiddelbart. Deretter trimmer skriptet overflødige sifre (et russisk nummer er 11 sifre inkludert landkoden) og bygger den formaterte strengen: landkode +7, tresifret retningsnummer i parentes, tre sifre, to, to, adskilt med bindestreker.

Før du bruker dette på et live-nettsted, legg til to forbedringer. For det første: når du sletter sifre midt i nummeret, kan markøren hoppe til slutten av feltet; lagre markørposisjonen via selectionStart og gjenopprett den etter formatering. For det andre: for numre fra andre land (Hviterussland har 12 sifre, Kasakhstan har 11 sifre med en annen kode) blir logikken mer kompleks, og på det tidspunktet er intl-tel-input fullt ut berettiget.

Fordel: 30 linjer, full kontroll, null kilobyte avhengigheter. Ulempe: masken er skreddersydd for ett format; for flerlandprosjekter vil koden vokse seg stor.

⁉️🤔 Ofte stilte spørsmål

Hvorfor er en maske bedre enn enkel validering?

Validering utløses etter innsending av skjema: brukeren ser en feil og må gå tilbake og fikse den. En maske fungerer under inntasting, noe som gjør et ugyldig format fysisk umulig. Mindre frustrasjon, færre forlatte skjemaer. For telefonnumre er dette kritisk: feil i nummeret er en av de vanligste årsakene til at brukere forlater et skjema.

Hvordan lagrer jeg rene sifre til databasen uten parenteser og bindestreker?

Alle bibliotekene i denne artikkelen gir råverdier: intl-tel-input har en getNumber()-metode som returnerer +79991234567, IMask.js har en unmaskedValue-egenskap som returnerer 79991234567. Før du sender data til serveren, hent råverdien og lagre den. Vis den formaterte strengen bare i grensesnittet. I WordPress-skjemaer legger du til et skjult felt <input type="hidden" name="phone_raw"> og fyller det via JavaScript før innsending.

Fungerer masken på mobile enheter?

Ja, alle fire metodene fungerer korrekt på iOS og Android. type="tel" henter opp det numeriske tastaturet, noe som er praktisk. På eldre Android (versjoner under 6) kan input-hendelsen oppføre seg annerledes med autokorrektur; test på ekte enheter. intl-tel-input og IMask.js er testet av utviklerne deres på mobile nettlesere og forårsaker ingen problemer.

Kan jeg bruke en maske med Contact Form 7?

CF7 genererer felt med .wpcf7-tel-klasser. Skriv et skript som finner dette feltet via selektor og knytter intl-tel-input eller IMask til det. Ved innsending av skjema henter CF7 verdien direkte fra feltet, så biblioteket må ha tid til å formatere det på forhånd. Hvis du bruker råverdier, fang opp wpcf7submit-hendelsen og erstatt dataene i et skjult felt.

Hva bør jeg gjøre med numre fra forskjellige land på samme nettsted?

Bruk intl-tel-input: brukeren velger et flagg, og masken bytter automatisk for å matche formatet til det valgte landet. For geomålretting kan du sette initialCountry: "auto", og biblioteket vil oppdage landet via IP gjennom en ekstern tjeneste. Hvis det bare er to eller tre land og avhengighetsbudsjettet ditt er minimalt, skriv to masker i ren JavaScript og bytt mellom dem med en «Russland / Kasakhstan»-radioknapp over feltet.

Hvilken metode du bør velge for din oppgave

Valget koker ned til tre spørsmål: hvor mange felt er det på nettstedet, trenger du landsflagg, og hvor kritisk er pakkestørrelsen.

Et enkelt skjema på en landingsside: start med HTML5 pattern. Raskt, ingen JavaScript, og på mobil bytter tastaturet til numerisk. Hvis nettstedet aksepterer internasjonale numre, vil intl-tel-input dekke alt: flagg, autoformatering, validering. For en nettbutikk eller SaaS er dette standarden.

Flere forskjellige masker på nettstedet (telefon, dato, beløp, kort): IMask.js vil gi deg ett API for alle felt og krever ikke jQuery. Bygger du et kjæledyrprosjekt og vil ha full kontroll: 30 linjer med ren JavaScript vil håndtere russiske numre uten en eneste avhengighet.

Test hvordan masken fungerer på et live-nettsted: skriv inn et nummer med bokstaver, lim inn fra utklippstavlen, prøv å slette et par sifre i midten. Feltet bør oppføre seg forutsigbart i ethvert scenario. Hvilken metode valgte du for prosjektet ditt? Del i kommentarfeltet.