Användare skriver in telefonnummer på alla möjliga sätt: vissa börjar med 8, andra med +7, en del skriver siffror utan mellanslag, andra lägger till mellanslag efter varje sifferpar. Databasen blir en enda röra. Chefer slösar tid på att ringa, och hälften av numren visar sig vara felaktiga. Ett välbekant scenario för alla som någon gång har lagt till ett kontaktformulär på en webbplats.

En inmatningsmask löser problemet helt: användaren kan fysiskt inte skriva in ett nummer i fel format. De skriver siffror, och siffrorna hamnar automatiskt på rätt plats medan parenteser och bindestreck dyker upp av sig själva. Inga fel, ingen frustration.

Här är fyra sätt att lägga till en telefonmask på ett inmatningsfält: från inbyggd HTML5 utan JavaScript till ett fullfjädrat bibliotek med flaggor för varje land. Med kod du kan kopiera och klistra in i ditt projekt.

💡 Snabb översikt:

• Den enklaste masken använder attributet pattern och type="tel", ingen JavaScript alls, fungerar i alla webbläsare
• Behöver du landsflaggor och internationell formatering, använd intl-tel-input, den populäraste lösningen på GitHub
• Behöver du ett bibliotek för telefoner, datum, kort och alla andra masker, välj IMask.js
• Vill du skriva en mask för hand utan att dra in beroenden, klarar vanlig JavaScript det på 30 rader

Vad är en inmatningsmask och varför den är viktigare än validering

En inmatningsmask är en mallsträng som styr vad användaren ser och kan skriva i ett formulärfält. Till skillnad från validering, som kontrollerar data efter inskick och visar ett fel, arbetar en mask i realtid under inmatning: den hindrar att man skriver en bokstav där en siffra ska stå och infogar automatiskt parenteser, bindestreck och mellanslag.

Skillnaden är fundamental. Validering säger "du gjorde ett misstag", och användaren är redan frustrerad och kanske lämnar. En mask guidar dem steg för steg: fel är helt enkelt omöjliga. För telefonnummer är detta kritiskt eftersom det finns dussintals formateringsalternativ. Bara ett ryskt nummer kan skrivas som +7 999 123-45-67, som 8(999)1234567 eller som +7(999)123-45-67, och detta är bara tre varianter av många. Utan en mask hittar varje användare på sitt eget format, och databasen förvandlas till en soptipp.

Metod 1: HTML5, type="tel" och pattern

Den enklaste vägen: hoppa över JavaScript helt. Moderna webbläsare stöder type="tel" och attributet pattern, som validerar inmatning mot ett reguljärt uttryck vid formulärinskick.

Lägg till fältet i din markup. Koden kan infogas i vilken HTML-mall som helst: Contact Form 7, ett inbyggt WordPress-formulär eller egen markup.

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
>

Låt oss bryta ner vad som händer här. type="tel" visar ett numeriskt tangentbord på mobila enheter istället för det vanliga tangentbordet, vilket gör telefoninmatning smidigare. pattern sätter ett reguljärt uttryck som tillåter flera varianter: med eller utan mellanslag, med eller utan parenteser runt riktnumret. title visar ett verktygstips vid hover, och required förhindrar att formuläret skickas med ett tomt fält.

Fördelen: noll beroenden, fungerar i alla webbläsare. För en enkel landningssida räcker detta.

Men detta är ingen riktig mask. Parenteser och bindestreck dyker inte upp automatiskt; användaren måste skriva dem manuellt. pattern aktiveras bara vid formulärinskick. Om du behöver formatering i realtid under inmatning, gå vidare till nästa metoder.

Metod 2: intl-tel-input, internationellt format med landsflaggor

intl-tel-input är det populäraste JavaScript-biblioteket för telefoninmatning. Det ger ett fält med en rullgardinslista med landsflaggor, autoformatering som matchar den nationella mallen och nummervalidering. I juni 2026 har biblioteket över 7 800 stjärnor på GitHub, och den aktuella versionen är 29.

Installera biblioteket via npm (npm i intl-tel-input) eller CDN. Koden nedan är för vanilla JavaScript; det finns också färdiga komponenter för React, Vue, Angular och 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>

Inmatningselementet och initialiseringen placeras i mallen där du behöver fältet. För ett WordPress-tema, lägg till skriptet via wp_enqueue_script i functions.php, och placera markupen i rätt mallfil.

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" sätter den ryska flaggan som standard. separateDialCode: true flyttar landskoden utanför inmatningsfältet: när användaren byter flagga infogas koden automatiskt. utilsScript laddar formateringsverktyg; utan dem fungerar biblioteket fortfarande, men nummer formateras inte för att matcha det valda landets mönster.

Objektet som returneras av intlTelInput() tillhandahåller flera användbara metoder. iti.getNumber() returnerar numret i E.164 internationellt format, iti.isValidNumber() kontrollerar giltighet, och iti.setNumber("9991234567") sätter värdet programmatiskt. För Contact Form 7 behöver du ett anpassat skript: hitta fältet .wpcf7-tel och koppla intlTelInput till det.

Fördel: en komplett internationell lösning med autoformatering, flaggor, validering och ramverksintegrationer. Nackdel: biblioteket väger cirka 40 KB (gzip), vilket är overkill för en enkel landningssida med ett fält.

Metod 3: IMask.js, en universell mask utan jQuery

IMask.js är ett moget maskbibliotek skrivet i ren JavaScript: ingen jQuery, inga andra beroenden. Det stöder masker för telefoner, datum, nummer, valutor och dynamiska mallar. Det kommer till användning när du behöver olika typer av masker på en webbplats: en telefon i ett kontaktformulär, ett datum i en kalender och ett belopp i en kalkylator. Den aktuella versionen är 7.1.

Installera via npm (npm i imask) eller inkludera CDN:

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

En telefonmask på tre rader. Koden kan placeras i en <script>-tagg i sidfoten eller i en separat JS-fil i ditt tema.

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

Masksyntax: +{7} är ett fast prefix som användaren inte kan redigera. 0 står för valfri siffra från 0 till 9. Du kan lägga till komplexitet: gör riktnumret valfritt eller byt mask dynamiskt när landet ändras med hjälp av parametern dispatch.

IMask returnerar ett objekt med åtkomst till råvärdet: maskRef.unmaskedValue ger dig rena siffror 79991234567, precis vad du vill spara till databasen. Metoden maskRef.value returnerar den formaterade strängen för visning. Det klassiska problemet är löst: siffror går till backend, medan användaren ser ett snyggt formaterat nummer.

Fördel: ett bibliotek för alla fall, råvärden direkt ur lådan, inga beroenden. Nackdel: för ett enda telefonfält är det enklare att använda intl-tel-input med flaggor; IMask glänser verkligen på formulär med tre till fem olika fälttyper.

Metod 4: ren JavaScript, en handgjord mask

Om du inte vill dra in ett bibliotek för bara ett fält, skriv masken i ren JavaScript. Koden nedan hanterar varje tangenttryckning och infogar automatiskt parenteser och bindestreck allteftersom siffror skrivs in.

Placera skriptet i samma mall där inmatningsfältet finns, eller inkludera det som en separat fil. För WordPress, använd wp_enqueue_script med flaggan true (i sidfoten).

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

Händelsen input utlöses vid varje fältändring: inklistring från urklipp, autokorrigering, radering. Den första raden replace(/\D/g, '') tar bort allt utom siffror: bokstäver och specialtecken försvinner omedelbart. Sedan trimmar skriptet överskjutande siffror (ett ryskt nummer är 11 siffror inklusive landskod) och bygger den formaterade strängen: landskod +7, tresiffrigt riktnummer inom parentes, tre siffror, två, två, åtskilda av bindestreck.

Innan du använder detta på en live-webbplats, lägg till två förbättringar. För det första: när du raderar siffror i mitten av numret kan markören hoppa till slutet av fältet; spara markörpositionen via selectionStart och återställ den efter formatering. För det andra: för nummer från andra länder (Vitryssland har 12 siffror, Kazakstan har 11 siffror med en annan kod) blir logiken mer komplex, och vid det laget är intl-tel-input fullt motiverat.

Fördel: 30 rader, full kontroll, noll kilobyte beroenden. Nackdel: masken är skräddarsydd för ett format; för projekt med flera länder kommer koden att svälla.

⁉️🤔 Vanliga frågor

Varför är en mask bättre än enkel validering?

Validering aktiveras efter formulärinskick: användaren ser ett fel och måste gå tillbaka och åtgärda det. En mask arbetar under inmatning, vilket gör ett ogiltigt format fysiskt omöjligt. Mindre frustration, färre övergivna formulär. För telefonnummer är detta kritiskt: fel i numret är en av de vanligaste orsakerna till att användare överger ett formulär.

Hur sparar jag rena siffror till databasen utan parenteser och bindestreck?

Alla bibliotek i denna artikel tillhandahåller råvärden: intl-tel-input har en metod getNumber() som returnerar +79991234567, IMask.js har en egenskap unmaskedValue som returnerar 79991234567. Innan du skickar data till servern, hämta råvärdet och spara det. Visa den formaterade strängen endast i gränssnittet. I WordPress-formulär, lägg till ett dolt fält <input type="hidden" name="phone_raw"> och fyll i det via JavaScript före inskick.

Fungerar masken på mobila enheter?

Ja, alla fyra metoder fungerar korrekt på iOS och Android. type="tel" tar fram det numeriska tangentbordet, vilket är bekvämt. På äldre Android (versioner under 6) kan händelsen input bete sig annorlunda med autokorrigering; testa på riktiga enheter. intl-tel-input och IMask.js är testade av sina utvecklare på mobila webbläsare och orsakar inga problem.

Kan jag använda en mask med Contact Form 7?

CF7 genererar fält med klasserna .wpcf7-tel. Skriv ett skript som hittar detta fält via selektor och kopplar intl-tel-input eller IMask till det. Vid formulärinskick tar CF7 värdet direkt från fältet, så biblioteket måste hinna formatera det i förväg. Om du använder råvärden, fånga upp händelsen wpcf7submit och ersätt datan i ett dolt fält.

Vad ska jag göra med nummer från olika länder på samma webbplats?

Använd intl-tel-input: användaren väljer en flagga, och masken växlar automatiskt för att matcha det valda landets format. För geotargeting kan du sätta initialCountry: "auto", så upptäcker biblioteket landet via IP genom en extern tjänst. Om det bara finns två eller tre länder och din beroendebudget är minimal, skriv två masker i ren JavaScript och växla mellan dem med en "Ryssland / Kazakstan"-radioknapp ovanför fältet.

Vilken metod du ska välja för din uppgift

Valet kokar ner till tre frågor: hur många fält finns på webbplatsen, behöver du landsflaggor, och hur kritisk är paketstorleken.

Ett enda enkelt formulär på en landningssida: börja med HTML5 pattern. Snabbt, ingen JavaScript, och på mobil växlar tangentbordet till numeriskt. Om webbplatsen tar emot internationella nummer kommer intl-tel-input att täcka allt: flaggor, autoformatering, validering. För en webbutik eller SaaS är detta standard.

Flera olika masker på webbplatsen (telefon, datum, belopp, kort): IMask.js ger dig ett API för alla fält och kräver inte jQuery. Bygger du ett hobbyprojekt och vill ha full kontroll: 30 rader ren JavaScript hanterar ryska nummer utan ett enda beroende.

Testa hur masken fungerar på en live-webbplats: skriv in ett nummer med bokstäver, klistra in från urklipp, försök radera ett par siffror i mitten. Fältet ska bete sig förutsägbart i alla scenarier. Vilken metod valde du för ditt projekt? Dela med dig i kommentarerna.