Räkna HTML-statusändringar i realtid med CSS
Att räkna är en allestädes närvarande uppgift i webbapplikationer. Hur många olästa e-postmeddelanden har du? Hur många uppgifter lämnas obekant på din att göra-lista? Hur många munkar smaker tas i kundvagnen? Alla är viktiga frågor som användaren förtjänar svar på.
Så det här inlägget visar dig hur du ska räkna med två angivna element, som utgör majoriteten av användarinställningar som kryssrutor och textingångar, använder CSS-räknare.
Du behöver rikta dessa stater med CSS först, vilket är möjligt med hjälp av pseudoklasser och HTML-attribut det tillåter oss att göra just det. Gå vidare och experimentera med idén och utforska de olika pseudoklasserna som kan indikera förändringen i ett tillstånd av ett element, dynamiskt.
Vi börjar med de enklaste kryssrutorna.
1. Kryssrutor
Kryssrutor går in “kontrollerade” Ange när de är kryssade. De :kontrollerade pseudo-klass indikerar det kontrollerade tillståndet.
kryssrutan # 1
kryssrutan # 2
kryssrutan # 3
Kontrollerade:
Okontrollerat:
:: root counter-reset: tickedBoxCount, unTickedBoxCount; inmatning [typ = 'kryssruta'] mot-inkrement: unTickedBoxCount; inmatning [typ = 'kryssrutan']: markerad counter-increment: tickedBoxCount; #tickedBoxCount :: före innehåll: räknare (tickedBoxCount); #unTickedBoxCount :: före innehåll: räknare (unTickedBoxCount);
Som jag sa tidigare är det här fallet väldigt enkelt. Vi ställa in två räknare vid rotelementet och öka varje för varje kryssruta för respektive två tillstånd. Tellervärdena är då visas på en bestämd plats med innehåll fast egendom.
Om du vill förstå bättre hur CSS-räknare fungerar, ta en titt på vårt tidigare inlägg.
Nedan ser du slutresultatet. När du markerar och avmarkerar kryssrutorna, är värdena för “Kontrollerade” och “Okontrollerat” räknare är modifierad realtid.
2. Textinmatningar
Vi kan också räkna hur många textinmatningar har fyllts och hur många har lämnats tomma av användaren. Denna lösning kommer inte vara lika enkel som den föregående, eftersom, till skillnad från kryssrutor, textinmatningar har inte pseudoklasser att flagga när de är fyllda.
Så vi måste hitta en alternativ väg. Det finns en pseudoklass som Indikerar när ett element har platshållare; det heter : Platshållare visad.
Om vi använder platsinnehavare i vår textinmatning kan vi veta när ingångsfältet är tomt. Detta händer när användaren har ännu inte skrivit något i det eftersom platshållaren kommer att försvinna när det händer.
fylld:
Tömma:
:: root counter-reset: filledInputCount, emptyInputCount; inmatning [typ = 'text'] counter-increment: filledInputCount; inmatning [typ = 'text']: placeholder-visad counter-increment: emptyInputCount; #filledInputCount :: före innehåll: räknare (filledInputCount); #emptyInputCount :: före innehåll: räknare (tomInputCount);
Resultatet liknar det föregående - de två räknarna är ökas automatiskt och minskas som vi lägger till eller tar bort text till eller från inmatningsfälten.
3. Detaljer
Alternativa tillstånd av ett element behöver inte alltid indikeras av pseudoklasser. Det kanske är HTML-attribut som gör det jobbet, som i fallet med
De
Så, öppna HTML-attribut i elementet. Detta attribut kan riktas in i CSS usjunga sin attributväljare.
Q1: fråga # 1
svara # 1
Q2: fråga nr 2
svara # 2
Q3: fråga # 3
svara # 3
Öppna:
Stängd:
:: root counter-reset: openDetailCount, closedDetailCount; detaljer counter-increment: closedDetailCount; detaljer [öppna] counter-increment: openDetailCount; #closedDetailCount :: före innehåll: räknare (closedDetailCount); #openDetailCount :: före innehåll: räknare (openDetailCount);
Resultatet är två realtids CSS-räknare igen: Öppna och stängda.
4. Radioknappar
Att räkna på radioknappar kräver en annan teknik. Vi skulle säkert kunna använda :kontrollerade pseudoklass vi använde för kryssrutor. Men radioknapparna är används annorlunda än kryssrutor.
Radioknapparna är menade att vara i grupper. Användaren kan bara välja en i en grupp. Varje grupp fungerar som en enhet. De två stater som en radioknappgrupp kan ha är heller en av knapparna är vald eller ingen av dem är valda.
Således bör vi inte räkna radioknappar med enskilda knappar, men av knappgrupper. För att uppnå det, vi utnyttja : N: te-of-typ väljare. Jag ska förklara det senare; låt oss se koden först.
radio-1,1 radio-1,2 radio-1,3
radio-2,1 radio-2,2 radio-2,3
radio-2,1 radio-2,2 radio-2,3
Vald:
Avmarkerad:
Vi måste Tilldela samma namn till radioknapparna i samma grupp. Varje grupp i koden ovan har tre radioknappar inuti.
:: root counter-reset: selectedRadioCount, unSelectedRadioCount; inmatning [typ = 'radio']: nth-of-type (3n) counter-increment: unSelectedRadioCount; inmatning [typ = 'radio']: nth-of-type (3n): checked counter-increment: selectedRadioCount; inmatning [typ = 'radio']: inte (: nth-of-type (3n)): markerad counter-increment: unSelectedRadioCount -1 selectedRadioCount; #selectedRadioCount :: före innehåll: räknare (selectedRadioCount); #unSelectedRadioCount :: före innehåll: räknare (unSelectedRadioCount);
De tre första stilreglerna i ovanstående kod är samma som de som vi tillämpade i kryssrutor, förutom i stället för inriktning varje Radio knapp, Vi riktar oss till den senaste radioknappen i varje grupp, vilken är den tredje i vårt fall (: N: te-of-typ (3n)). Så vi räknar inte alla radioknappar men endast en per grupp.
Men det kommer inte att ge oss ett korrekt resultat i realtid, som vi har ännu inte gett någon regel för att räkna de andra två radioknapparna i gruppen. Om en av dem är markerad ska den räknas och det obekanta resultatet ska minska samtidigt.
Det är därför vi Lägg till en -1 värde efter unSelectedRadioCount i den sista stilregeln som riktar sig mot de andra två radioknapparna i en grupp. När en av dem är markerad, -1 kommer minska det obekanta resultatet.
Placeringen av räkningar
Du kan bara se rätt resultat efter att räkningen har slutförts, d.v.s. efter alla de element som ska räknas har bearbetats. Därför måste vi placera elementet inuti vilket vi ska visa räknarna först efter att elementen har räknats i HTML-källkoden.
Du kanske inte vill visa räknarna under elementen men någon annanstans på sidan. I det här fallet, du måste byta tält använder CSS egenskaper som Översätt, marginal, eller placera.
Men mitt förslag skulle vara att använd CSS-nätet så att du kan skapa layout på din sida oberoende av ordningen av dess element i HTML-källkoden. Du kan till exempel enkelt skapa ett rutnät som placerar räknarna ovanför eller bredvid inmatningsfälten.
