Registreringsskjema, telefonfelt, katalogsøk: brukeren klikker på et INPUT-felt og taster noe. Bokstaver der du forventer sifre. Spesialtegn i et ordrenummer. Emoji i et e-postfelt. Resultatet: søppel i databasen, ødelagte spørringer, backend-validering som feiler med en feilmelding.

Problemet løses på frontend med 15 linjer kode. Ingen plugins, ingen biblioteker, bare vanlig JavaScript eller et par HTML-attributter. Nedenfor finner du tre fungerende tilnærminger: fra rask HTML5 til finmasket filtrering på keydown, med ferdige eksempler for vanlige scenarioer.

💡 Rask oversikt:

• Vi ser på når HTML-attributtene pattern, inputmode og type er nok, og når JavaScript er nødvendig
• Vi skriver et «kun sifre»-filter i jQuery og vanlig JS, begge versjoner med linje-for-linje-gjennomgang
• Vi legger til beskyttelse mot liming via Ctrl+V og kontekstmeny
• Vi bygger en universell malfunksjon for alle begrensninger: bokstaver, latinske tegn, egendefinerte mønstre

HTML5: hva du kan gjøre uten en eneste linje JavaScript

Den enkleste og mest pålitelige måten å begrense inndata på er å fortelle nettleseren nøyaktig hva du forventer i et felt. Moderne nettlesere forstår tre nøkkelattributter som dekker de fleste vanlige oppgaver.

type, det primære filteret. type="number" tillater kun sifre, minus og desimalskilletegn. type="tel" viser et numerisk tastatur på mobile enheter. type="email" sjekker for @ ved innsending av skjema. type="url" krever en protokoll. Dette blokkerer ikke inndata fullstendig, men det gir riktig skjermtastatur og grunnleggende validering ved innsending.

pattern, et regulært uttrykk på feltet. Attributtet aksepterer et regex og validerer verdien ved innsending av skjema:

1
<input type="text" pattern="[0-9]{6}" placeholder="Six digits" title="Exactly 6 digits">

Nettleseren blokkerer innsending hvis verdien ikke samsvarer med mønsteret. Ulempen: pattern forhindrer ikke at man taster inn ulovlige tegn; det validerer bare resultatet. Brukeren kan taste «abc», og får bare se feilen når de prøver å sende inn skjemaet.

inputmode, riktig tastatur på mobil. inputmode="numeric" åpner et numerisk tastatur, men forbyr ikke inntasting av bokstaver. inputmode="decimal" legger til et skilletegn. Nyttig i kombinasjon med et JavaScript-filter: tastaturet er allerede riktig, og JS håndterer resten.

Hva du bør velge. Hvis du trenger å faktisk forhindre inntasting av ulovlige tegn i sanntid, er ikke HTML-attributter nok. La oss gå over til JavaScript.

JavaScript: blokkering av tastetrykk via keydown

keydown-tilnærmingen fanger hvert tastetrykk før tegnet vises i feltet. Hvis tasten ikke er på hvitelisten, undertrykker event.preventDefault() den.

Alternativ 1: jQuery, kun sifre

Koden festes til et INPUT-felt via id, tillater sifre og tjenestetaster (backspace, piler, Tab), og blokkerer alt annet:

1
$(document).ready(function() {
2
    $("#phone_input").keydown(function(event) {
3
        // Service keys — let them through
4
        if (event.keyCode === 46 || event.keyCode === 8 ||
5
            event.keyCode === 9  || event.keyCode === 27 ||
6
            (event.keyCode === 65 && event.ctrlKey === true) ||
7
            (event.keyCode >= 35 && event.keyCode <= 39)) {
8
            return;
9
        }
10
        // Block everything except digits (main block and numpad)
11
        if ((event.keyCode &lt; 48 || event.keyCode &gt; 57) &&
12
            (event.keyCode &lt; 96 || event.keyCode &gt; 105)) {
13
            event.preventDefault();
14
        }
15
    });
16
});

Her er hva som skjer linje for linje: keyCode 46 (Delete), 8 (Backspace), 9 (Tab), 27 (Escape), 65 + Ctrl (velg alt), 35..39 (Home, End, piler). Deretter kommer hovedblokken med sifre 48..57 (0..9) og numerisk tastatur 96..105. Alt som ikke faller innenfor disse områdene får preventDefault.

Fullstendig tabell over tastekoder hos Cambia Research.

Alternativ 2: vanlig JavaScript, kun sifre

Det samme uten jQuery, med onkeypress. Denne versjonen er mer kompakt og trekker ikke inn et bibliotek:

1
document.getElementById("phone_input").onkeypress = function(event) {
2
    event = event || window.event;
3
    if (event.charCode && (event.charCode < 48 || event.charCode > 57)) {
4
        return false;
5
    }
6
};

charCode sjekker at hendelsen har et utskrivbart tegn; tjenestetaster (piler, backspace) slipper gjennom automatisk siden deres charCode er lik 0. Sifre: 48..57, alt annet returnerer false.

Viktig: keyCode anses som utdatert. I moderne kode er det bedre å bruke event.key, som returnerer en streng med tastenavnet og ikke avhenger av tastaturoppsett:

1
element.addEventListener("keydown", function(event) {
2
    // Allow digits, Backspace, Delete, arrows, Tab
3
    const allowedKeys = [
4
        "Backspace", "Delete", "Tab", "Escape",
5
        "ArrowLeft", "ArrowRight", "ArrowUp", "ArrowDown",
6
        "Home", "End"
7
    ];
8
    if (allowedKeys.includes(event.key)) return;
9
    // Ctrl+A / Ctrl+C / Ctrl+V
10
    if (event.ctrlKey) return;
11
    // Only digits
12
    if (!/^[0-9]$/.test(event.key)) {
13
        event.preventDefault();
14
    }
15
});

event.key-tilnærmingen er mer lesbar og krever ikke at man husker numeriske koder. Men for støtte av eldre nettlesere fungerer keyCode-versjonen over fortsatt.

Blokkering av liming: fange opp Ctrl+V og kontekstmeny

keydown fanger tastetrykk, men brukeren kan lime inn tekst via Ctrl+V eller høyreklikk → «Lim inn». De kopierte «abc123» inn i et felt for kun sifre, og halvparten slapp gjennom.

Løsningen er input-hendelsen. Den utløses etter ENHVER endring av feltverdien: manuell inntasting, liming, autofyll, dra-og-slipp av tekst. Vi filtrerer sluttverdien med et regulært uttrykk:

1
document.getElementById("digits_only").addEventListener("input", function(event) {
2
    this.value = this.value.replace(/[^0-9]/g, "");
3
});

Det er alt. Én linje, og ikke et eneste ikke-siffer vil passere gjennom feltet, uansett hvordan det kom dit. For bokstaver: replace(/[^a-zA-Zа-яА-ЯёЁ]/g, ""). For latinske tegn: replace(/[^a-zA-Z]/g, "").

Kombinert tilnærming (den gylne middelvei). keydown gir umiddelbar tilbakemelding (tasten «trykkes ikke»), mens input vokter mot liming. Bruk begge handlerne:

1
const field = document.getElementById("digits_only");
2
 
3
field.addEventListener("keydown", function(event) {
4
    const allowed = ["Backspace", "Delete", "Tab", "Escape",
5
                     "ArrowLeft", "ArrowRight", "Home", "End"];
6
    if (allowed.includes(event.key)) return;
7
    if (event.ctrlKey) return;
8
    if (!/^[0-9]$/.test(event.key)) event.preventDefault();
9
});
10
 
11
field.addEventListener("input", function() {
12
    this.value = this.value.replace(/[^0-9]/g, "");
13
});

Den første handleren kutter ulovlige tastetrykk umiddelbart. Den andre rydder opp i rester etter liming og autofyll.

Ferdig mal for alle begrensninger

La oss bygge en funksjon som tar et INPUT-felt og et regulært uttrykk for tillatte tegn. Den fungerer for telefonnumre, postnumre, brukernavn, SKU-søk:

1
function restrictInput(element, allowedPattern) {
2
    element.addEventListener("keydown", function(event) {
3
        const serviceKeys = [
4
            "Backspace", "Delete", "Tab", "Escape",
5
            "ArrowLeft", "ArrowRight", "Home", "End"
6
        ];
7
        if (serviceKeys.includes(event.key)) return;
8
        if (event.ctrlKey && ["a", "c", "v", "x", "z"].includes(event.key.toLowerCase())) return;
9
        if (!allowedPattern.test(event.key)) event.preventDefault();
10
    });
11
 
12
    element.addEventListener("input", function() {
13
        // Build a global pattern from the provided one and clean
14
        const globalPattern = new RegExp(
15
            allowedPattern.source.replace("^", "").replace("$", ""),
16
            "g"
17
        );
18
        // Remove everything that does NOT match the pattern
19
        const inverted = new RegExp(
20
            "[^" + allowedPattern.source.slice(1, -1) + "]", "g"
21
        );
22
        this.value = this.value.replace(inverted, "");
23
    });
24
}

Bruk:

1
// Digits only
2
restrictInput(document.getElementById("phone"), /^[0-9]$/);
3
// Latin letters only without spaces
4
restrictInput(document.getElementById("login"), /^[a-zA-Z]$/);
5
// Letters and digits
6
restrictInput(document.getElementById("postal"), /^[a-zA-Z0-9]$/);

Funksjonen er ikke avhengig av jQuery, fungerer i alle moderne nettlesere og dekker tre scenarioer: manuell inntasting (keydown), liming (input), autofyll (input).

Merk: keydown utløses ikke på virtuelle tastaturer på enkelte mobile enheter; der forblir input den eneste sikringen. Derfor er to handlere sammen ikke redundans, men en nødvendighet.

Videoen over er en gjennomgang av skjemavalidering i vanlig JavaScript fra Web Dev Simplified. Den dekker det innebygde Constraint Validation API-et, egendefinerte feilmeldinger og styling av ugyldige felt, et flott supplement til tilnærmingene beskrevet her.

⁉️🤔 Ofte stilte spørsmål

Hvorfor ikke bare bruke type="number"?

type="number" tillater inntasting av e og E (eksponent), pluss, minus og punktum. Alle disse er gyldige tegn for flyttall og eksponentiell notasjon. For et telefonfelt eller postnummer er de unødvendige. I tillegg håndterer nettlesere ikke-numeriske inndata forskjellig: noen slipper dem stille gjennom, andre viser en feil først ved innsending.

Kan man fullstendig blokkere liming via Ctrl+V?

Å blokkere liming fullstendig er dårlig praksis. Det ødelegger brukeropplevelsen og beskytter ikke mot andre limemetoder (kontekstmeny, dra-og-slipp). Riktig tilnærming: tillat liming, men rens resultatet umiddelbart via en input-handler, som vist i avsnittet over.

Hva med nettleserens autofyll?

Autofyll utløses før keydown og input; nettleseren setter inn verdien direkte. input-handleren fanger også opp dette tilfellet: verdien vises i feltet, og filtreres deretter umiddelbart. Hvis autofyll forstyrrer (setter inn bokstaver i et telefonfelt), legg til attributtet autocomplete="off" på INPUT-feltet.

Fungerer dette på mobile enheter?

Ja, men med et forbehold: virtuelle tastaturer genererer ikke alltid keydown med forventet keyCode og key. input-handleren fungerer pålitelig overalt. På mobil, sett inputmode="numeric" eller inputmode="decimal" på INPUT-feltet; brukeren får riktig tastatur selv om keydown-filteret ikke utløses.

Hvordan forbyr man mellomrom?

Legg til mellomrom i tegnklassen for ulovlige tegn: replace(/[^0-9a-zA-Z]/g, "") fjerner alt unntatt sifre og latinske bokstaver, inkludert mellomrom. Eller eksplisitt: this.value = this.value.replace(/\s/g, "") vil fjerne alle mellomrom, tabulatorer og linjeskift.

Hvilken tilnærming du bør velge for din oppgave

Hvis skjemaet er enkelt og et par feil tegn ikke vil forårsake kritisk skade, bruk HTML5: type, pattern og inputmode vil dekke grunnleggende scenarioer uten en eneste linje JS. Raskt, innebygd, ingen avhengigheter.

Hvis sanntidskontroll og umiddelbar reaksjon på hvert tastetrykk er viktig, bruk kombinasjonen keydown + input. Den første blokkerer tastetrykk, den andre rydder opp i limekonsekvenser. Den universelle malfunksjonen fra avsnittet over tilpasser seg ethvert felt på et minutt.

Hovedregelen: ikke blokker liming fullstendig. Det irriterer brukere og gir ikke reell beskyttelse. Rens resultatet etter liming i stedet for å forby det.