Visst, låt oss börja skriva artikeln.
JavaScript , ett dynamiskt och mångsidigt programmeringsspråk, är nyckeln till att driva interaktivitet på webben. Det är en integrerad del av webbutvecklingens ekosystem. Bland de många problem som JavaScript hjälper till att lösa kommer den här artikeln specifikt att fokusera på problemet med att säkerställa att ett inmatningsfält endast kan acceptera numeriska värden.
### JavaScript-teknik för att begränsa inmatning till endast siffror
Lösningen vi kommer att använda involverar vanilla JavaScript, utan behov av externa bibliotek.
Här är operationslogiken i sammanfattning: Vi kommer att skapa en händelseavlyssnare i inmatningsfältet som kommer att reagera på tangenttryckningshändelsen. Närhelst en tangenttryckningshändelse utlöses, kommer händelseavlyssnaren att utvärdera ett reguljärt uttryckstest på tangenttryckningshändelsen. Om testet av det reguljära uttrycket misslyckas kommer ingångshändelsen att förhindras.
Låt oss dyka in i kodimplementeringen.
document.querySelector('input').addEventListener('keypress', function (evt) {
var charCode = (evt.which) ? evt.which : evt.keyCode;
if (charCode != 46 && charCode > 31 && (charCode < 48 || charCode > 57))
evt.preventDefault();
});
### Steg-för-steg förklaring av koden
Den här koden kopplar en "knapptrycks"-händelselyssnare till inmatningsfältet. När en knapptryckningshändelse utlöses kontrollerar den först tecknets ASCII-värde. Om det inte är inom intervallet för numeriska ASCII-värden (inklusive 48–57), förhindras händelsens standardåtgärd (att infoga tecknet i inmatningsfältet).
Låt oss bryta ner det:
- querySelector('input'): Detta är en metod som returnerar det första inmatningsfältet som matchar den angivna väljaren inuti dokumentet.
- addEventListener('keypress', function(evt)): Den här metoden lägger till en händelseavlyssnare av angiven typ (knapptryckning) till det valda DOM-elementet. Den andra parametern är en funktion som exekveras när händelsen utlöses.
- evt.vilken ? evt.som : evt.keyCode: Detta är en villkorad operation som säkerställer kompatibilitet med olika webbläsare. `evt.which` är odefinierad i vissa äldre webbläsare, i vilket fall `evt.keyCode` används.
- Om (charCode != 46 && charCode > 31 && (charCode < 48 || charCode > 57)): Detta är ett villkor som kontrollerar om tecknet är ett icke-decimalt tal. 46 är ASCII-värdet för punkttecknet och siffror ligger i ASCII-intervallet mellan 48 och 57.
- evt.preventDefault(): Slutligen, om villkoret är uppfyllt, förhindras standardåtgärden för händelsen – som matar in tecknet i inmatningsfältet.
### Ytterligare insikt i de funktioner och bibliotek som är involverade
Ovanstående lösning använder inbyggda JavaScript-funktioner och egenskaper och involverar inga externa bibliotek. Här är lite mer om huvudelementen som används i vår lösning:
JavaScript-händelselyssnare
JavaScript-händelser är det som gör webbsidor responsiva och interaktiva. En händelseavlyssnare lyssnar efter att en specifik händelse inträffar.
I samband med HTML-dokument kan många händelser inträffa, såsom att en användare klickar på ett element, håller muspekaren över ett element, trycker på en tangent på tangentbordet, etc. Dessa händelser kan användas för att köra skript som har definierats.
JavaScript reguljära uttryck
Ett reguljärt JavaScript-uttryck är en sekvens av tecken som bildar ett sökmönster. I vår lösning använde vi ett reguljärt uttryck för att kontrollera om ingångsvärdet föll inom det önskade intervallet. Reguljära uttryck gör det enkelt att testa flera villkor och är väldigt praktiska när det kommer till formvalidering.
Sammanfattningsvis är att begränsa inmatningen till endast siffror i ett fält en nyckelaktivitet i formvalidering, en av de vanligaste tillämpningarna av JavaScript på webben. Denna lösning säkerställer inte bara giltig datainmatning utan förbättrar också användarupplevelsen genom att förhindra ogiltiga tangenttryckningar.
