I den här handledningen kommer du att lära dig hur du kan reagera på förändringar i input-elementen i webbformulär med hjälp av JavaScript. Det är viktigt att använda lämpliga händelsehanterare för att optimera användarupplevelsen och se till att du får rätt värden för vidare bearbetning. Specifikt kommer vi att titta på händelserna onchange och oninput för att säkerställa att dina inmatningar behandlas dynamiskt och effektivt.
Viktigaste insikter
- onchange-händelsen utlöses när användaren tar fokus från en inmatningsruta och ändringar har gjorts.
- oninput-händelsen utlöses vid varje inmatning och möjliggör direkt interaktion med användaren.
- Värdena som returneras från input-element är ursprungligen strängar och kan behöva omvandlas till rätt datatyp (t.ex. med parseFloat eller valueAsNumber).
Steg-för-steg-guide
För att demonstrera de nämnda koncepten kommer vi att gå igenom olika steg för att registrera händelser i en inmatningsruta och arbeta med data.
Steg 1: Skapa en input-element
Först måste du skapa en enkel nummerinmatningsruta i din HTML-fil. Strukturera din HTML med en inmatningsruta för åldersangivelse.
Steg 2: Lägg till och testa onchange-händelse
Nu lägger vi till en händelsehanterare för onchange-händelsen. Vi gör detta genom att skapa en funktion som anropas när användaren tar fokus från inmatningsrutan.
Otäck att vi kan komma åt inmatningsdatan direkt vid ändring av värdet.
Steg 3: Bearbetning av inmatningsvärdet
Inom denna funktion kan du få värdet från inmatningsrutan via händelseobjektet. Åtkomsten till värdet bör ske genom event.target.value för att direkt hämta det aktuella värdet.
Kanske finns det situationer där vi vill posta eller bearbeta det inmatade värdet men först behöver kontrollera det? De olika typerna av värden är viktiga, särskilt om du vill göra numeriska beräkningar.
Steg 4: Typkontroll av värdet
Som du kanske har märkt returnerar inmatningsrutan alltid värdet som en sträng. För att säkerställa att vi får ett nummer kan vi använda konvertering av datatyp. Du kan använda parseFloat för att se till att vi arbetar med rätt datatyp.
Steg 5: Implementering av oninput-händelsen
Om du behöver en dynamisk reaktion när användaren skriver något bör du använda oninput-metoden som ett komplement till onchange. Det innebär att varje gång användaren gör en tangenttryckning eller ändrar värdet, kommer funktionen att kallas direkt.
Steg 6: Jämförelse av båda händelserna
Observera skillnaderna mellan oninput och onchange. oninput aktiveras vid varje inmatning, medan onchange bara aktiveras när användaren lämnar inmatningsfältet. Detta är särskilt användbart om realtidsfeedback önskas.
Steg 7: Arbeta med olika inmatningstyper
De metoder som används för en inmatningsruta av typen number gäller också för andra typer som text eller färg. Om du använder ett fält för färgval kommer du snabbt att inse att användningen av händelserna bör anpassas till typen.
Sammanfattning
I den här handledningen har du lärt dig hur du använder JavaScript för att reagera på användarinteraktioner i inmatningsfält. Du har lärt dig hur onchange och oninput fungerar och hur viktigt det är att hantera inmatningsvärdena på lämpligt sätt beroende på typ.
Vanliga frågor
Vilka händelser kan jag använda för inmatningsfält?Du kan använda onchange, oninput, samt andra händelser som onclick eller specifika tangentbordshändelser.
Hur får jag det aktuella värdet av ett inmatningsfält?Använd event.target.value för att få det aktuella värdet.
När triggas onchange-händelsen?Onchange-händelsen triggas när användaren tar fokus från inmatningsfältet och gör ändringar.
Hur kan jag se till att ett värde tolkas som ett nummer?Du kan använda parseFloat() eller valueAsNumber för att konvertera strängen till ett nummer.
Finns det skillnader mellan oninput och onchange?Ja, oninput anropas vid varje värdeändring, medan onchange endast triggas när fokus lämnar inmatningsfältet.
