Καταμέτρηση αλλαγών κατάστασης HTML σε πραγματικό χρόνο με CSS

Η μέτρηση είναι μια πανταχού παρούσα εργασία σε εφαρμογές ιστού. Πόσα μη αναγνωσμένα μηνύματα ηλεκτρονικού ταχυδρομείου έχετε; Πόσες εργασίες παραμένουν ανεξέλεγκτες στη λίστα υποχρεώσεων; Πόσες γεύσεις ντόνατς συσκευάζονται στο καλάθι αγορών; Όλα είναι κρίσιμα ερωτήματα για τα οποία οι χρήστες αξίζουν απαντήσεις.

Έτσι, αυτή η ανάρτηση θα σας δείξει πώς να μετρήστε τα στοιχεία που αναφέρθηκαν, τα οποία αποτελούν την πλειοψηφία των στοιχείων ελέγχου χρήστη, όπως πλαίσια ελέγχου και εισαγωγές κειμένου, χρησιμοποιώντας μετρητές CSS.

Πρέπει να το κάνετε στοχεύστε πρώτα σε αυτά τα κράτη με CSS, η οποία είναι δυνατή μέσω του ψευδο-κλάσεις και χαρακτηριστικά HTML που μας επιτρέπουν να κάνουμε ακριβώς αυτό. Πηγαίνετε μπροστά και πειραματιστείτε με την ιδέα και εξερευνήστε τις διαφορετικές ψευδο-κατηγορίες που μπορούν να υποδηλώσουν τη μεταβολή σε μια κατάσταση ενός στοιχείου, δυναμικά.

Θα ξεκινήσουμε με τα πιο απλά πλαίσια ελέγχου.

1. Κουτιά ελέγχου

Τα πλαίσια ελέγχου μπαίνουν “τετραγωνισμένος” όταν είναι σημειωμένα. ο :τετραγωνισμένος ψευδο-τάξη υποδεικνύει την κατάσταση ελέγχου.

  πλαίσιο ελέγχου # 1
  πλαίσιο ελέγχου # 2
  πλαίσιο ελέγχου # 3
 
Τετραγωνισμένος:  
Ανεξέλεγκτος:

 :: root counter-reset: tickedBoxCount, unTickedBoxCount;  είσοδος [type = 'checkbox'] αντίθετη προσαύξηση: unTickedBoxCount;  είσοδος [type = 'checkbox']: ελεγμένο counter-increment: tickedBoxCount;  #tickedBoxCount :: πριν από την content: counter (tickedBoxCount);  #unTickedBoxCount :: πριν από την content: counter (unTickedBoxCount);

Όπως είπα και πριν, αυτή η υπόθεση είναι πολύ απλή. Εμείς ορίστε δύο μετρητές στο στοιχείο ρίζας και αυξάνετε το καθένα για κάθε πλαίσιο ελέγχου για τις δύο καταστάσεις του, αντίστοιχα. Οι τιμές του μετρητή είναι στη συνέχεια εμφανίζεται σε έναν καθορισμένο τόπο χρησιμοποιώντας περιεχόμενο ιδιοκτησία.

Αν θέλετε να καταλάβετε καλύτερα πώς λειτουργούν οι μετρητές CSS, ρίξτε μια ματιά στην προηγούμενη θέση μας.

Παρακάτω, μπορείτε να δείτε το τελικό αποτέλεσμα. Όταν ελέγχετε και καταργείτε την επιλογή των πλαισίων ελέγχου, οι τιμές του “Τετραγωνισμένος” και “Ανεξέλεγκτος” μετρητές είναι τροποποιημένο σε πραγματικό χρόνο.

2. Εισαγωγές κειμένου

Μπορούμε επίσης να μετρήσουμε πόσες εισόδους κειμένου έχουν πληρωθεί και πόσες έχουν αδειάσει από τον χρήστη. Αυτή η λύση δεν θα είναι τόσο απλή όσο η προηγούμενη, διότι, σε αντίθεση με τα πλαίσια ελέγχου, οι εισόδους κειμένου δεν έχουν ψευδοκλάδο να σημαίνουν όταν γεμίζουν.

Έτσι, πρέπει να βρούμε μια εναλλακτική διαδρομή. Υπάρχει ψευδο-τάξη υποδεικνύει πότε ένα στοιχείο έχει κείμενο κράτησης θέσης. λέγεται : εμφανίζεται το σύμβολο κράτησης θέσης.

Εάν χρησιμοποιούμε τοποθετημένους χαρακτήρες στην εισαγωγή κειμένου, μπορούμε να γνωρίζουμε πότε το πεδίο εισαγωγής είναι άδειο. Αυτό συμβαίνει όταν ο χρήστης δεν έχει πληκτρολογήσει ακόμα τίποτα σε αυτό επειδή το σύμβολο θα εξαφανιστεί όταν συμβεί αυτό.

 
 
 
 
 Γέματο:  
 Αδειάζω:

 :: root αντιστροφή-επαναφορά: filledInputCount, emptyInputCount;  είσοδος [type = 'κείμενο'] αντιστροφή-προσαύξηση: filledInputCount;  είσοδος [type = 'κείμενο']: εμφάνιση τοποθεσίας αντι-προσαύξηση: emptyInputCount;  #filledInputCount :: πριν από την content: counter (filledInputCount);  #emptyInputCount :: πριν από την content: counter (emptyInputCount);

Το αποτέλεσμα είναι παρόμοιο με το προηγούμενο - οι δύο μετρητές είναι αυξήθηκε αυτόματα και μειώθηκε καθώς προσθέτουμε ή αφαιρούμε κείμενο προς ή από τα πεδία εισαγωγής.

3. Λεπτομέρειες

Οι εναλλακτικές καταστάσεις ενός στοιχείου δεν πρέπει πάντα να υποδεικνύονται μόνο από ψευδο-τάξεις. Ισως υπάρξει Χαρακτηριστικά HTML που κάνουν αυτήν την εργασία, όπως στην περίπτωση του

στοιχείο.

στοιχείο εμφανίζει τα περιεχόμενα του

παιδικό στοιχείο. Όταν ο χρήστης κάνει κλικ σε αυτό, άλλα περιεχόμενα του

στοιχείο να γίνουν ορατά. Σημειώστε ότι

στοιχείο πρέπει πάντα να έρχονται πρώτα μεταξύ των παιδιών του

Έτσι,

έχει δύο καταστάσεις: ανοικτό και κλειστό. Η ανοικτή κατάσταση υποδεικνύεται από το παρουσία του Άνοιξε Χαρακτηριστικό HTML στο στοιχείο. Αυτό το χαρακτηριστικό μπορεί να στοχεύει στο CSS uτραγουδήστε τον επιλογέα χαρακτηριστικών.

  Ε1: ερώτηση # 1
 απάντηση # 1
 
  Ε2: ερώτηση # 2
 απάντηση # 2
 
  Ε3: ερώτηση # 3
 απάντηση # 3
 
 
 
 Ανοιξε:  
 Κλειστό:

 :: root αντιστροφή-επαναφορά: openDetailCount, closedDetailCount;  λεπτομέρειες counter-increment: closedDetailCount;  λεπτομέρειες [ανοίξτε] αντίθετη προσαύξηση: openDetailCount;  #closedDetailCount :: πριν από την content: counter (closedDetailCount);  #openDetailCount :: πριν από την content: counter (openDetailCount);

Το αποτέλεσμα είναι δύο μετρητές CSS σε πραγματικό χρόνο ξανά: Άνοιγμα και κλείσιμο.

4. Κουμπιά ραδιοφώνου

Η μέτρηση των κουμπιών επιλογής απαιτεί διαφορετική τεχνική. Θα μπορούσαμε ασφαλώς να χρησιμοποιήσουμε το :τετραγωνισμένος ψευδο-τάξη που χρησιμοποιήσαμε για checkboxes. Ωστόσο, τα κουμπιά επιλογής είναι χρησιμοποιούνται διαφορετικά από τα πλαίσια ελέγχου.

Κουμπιά ραδιοφώνου είναι προοριζόταν να είναι σε ομάδες. Ο χρήστης μπορεί να επιλέξει μόνο ένα μέσα σε μια ομάδα. Κάθε ομάδα λειτουργεί ως ενιαία μονάδα. Οι δύο καταστάσεις που μπορεί να έχει μια ομάδα κουμπιών επιλογής είναι είτε ένα από τα κουμπιά είναι επιλεγμένο ή κανένας από αυτούς δεν έχει επιλεγεί.

Επομένως, δεν πρέπει να μετρήσουμε τα κουμπιά επιλογής από μεμονωμένα κουμπιά, αλλά με ομάδες κουμπιών. Για να το επιτύχουμε αυτό, εμείς να κάνουν χρήση του : n-of-type εκλέκτορας. Θα το εξηγήσω αργότερα. ας δούμε πρώτα τον κώδικα.

 ραδιόφωνο-1.1 ραδιόφωνο-1.2 ραδιόφωνο-1.3 
 ραδιόφωνο-2.1 ραδιόφωνο-2.2 ραδιόφωνο-2.3 
 ραδιόφωνο-2.1 ραδιόφωνο-2.2 ραδιόφωνο-2.3 
 
 Επιλεγμένο:  
 Δεν έχει επιλεγεί:

Εμείς πρέπει να ορίστε το ίδιο όνομα στα κουμπιά επιλογής στην ίδια ομάδα. Κάθε ομάδα στον παραπάνω κώδικα έχει μέσα τρία κουμπιά.

 :: ρίζα counter-reset: selectedRadioCount, unSelectedRadioCount;  είσοδος [type = 'ραδιόφωνο']: nth-of-type (3n) αντίθετη προσαύξηση: unSelectedRadioCount;  είσοδος [type = 'ραδιόφωνο']: nth-of-type (3n): Έλεγχος counter-increment: selectedRadioCount;  είσοδος [type = 'ραδιόφωνο']: όχι (: nth-of-type (3n)): Έλεγχος counter-increment: unSelectedRadioCount -1 selectedRadioCount;  #selectedRadioCount :: πριν από την content: counter (selectedRadioCount);  #unSelectedRadioCount :: πριν από την content: counter (unSelectedRadioCount);

Οι πρώτοι τρεις κανόνες στυλ στο παραπάνω απόσπασμα είναι οι ίδιοι με τους κανόνες που εφαρμόσαμε στα πλαίσια ελέγχου, εκτός από τη στόχευση κάθε κουμπί ραδιοφώνου, στοχεύουμε το τελευταίο κουμπί επιλογής σε κάθε ομάδα, που είναι η τρίτη στην περίπτωσή μας (: n-ο-τύπου (3n)). Έτσι, δεν μετράμε όλα τα ραδιοφωνικά κουμπιά αλλά μόνο μία ανά ομάδα.

Ωστόσο, αυτό δεν θα μας δώσει ένα σωστό αποτέλεσμα σε πραγματικό χρόνο, όπως εμείς δεν έχετε δώσει κανένας κανόνα για να μετρήσετε τα άλλα δύο κουμπιά ραδιοφώνου στην ομάδα. Εάν ελέγχεται ένας από αυτούς, θα πρέπει να μετράται και το μη ελεγμένο αποτέλεσμα θα πρέπει να μειώνεται ταυτόχρονα.

Γι 'αυτό και εμείς πρόσθεσε ένα -1 αξία μετά unSelectedRadioCount στον τελευταίο κανόνα στυλ που στοχεύει τα άλλα δύο κουμπιά επιλογής σε μια ομάδα. Όταν ελέγχεται ένας από αυτούς, -1 θα μειώστε το μη ελεγμένο αποτέλεσμα.

Η τοποθέτηση των μετρήσεων

Μπορείτε να δείτε το σωστό αποτέλεσμα μετά την ολοκλήρωση της καταμέτρησης, δηλαδή αφού όλα τα στοιχεία που πρέπει να μετρηθούν έχουν υποβληθεί σε επεξεργασία. Αυτός είναι ο λόγος για τον οποίο πρέπει να τοποθετήσουμε το στοιχείο εντός του οποίου θα εμφανιστούν οι μετρητές μόνο μετά την καταμέτρηση των στοιχείων στον πηγαίο κώδικα HTML.

Μπορεί να μην θέλετε να εμφανίσετε τους μετρητές κάτω από τα στοιχεία αλλά κάπου αλλού στη σελίδα. Σε αυτή την περίπτωση, εσύ πρέπει να επανατοποθετήσετε τους μετρητές χρησιμοποιώντας ιδιότητες CSS όπως μεταφράζω, περιθώριο, ή θέση.

Αλλά, η πρότασή μου θα ήταν να χρησιμοποιήστε το πλέγμα CSS ώστε να μπορείτε να δημιουργήσετε τη διάταξη της σελίδας σας ανεξάρτητα από τη σειρά των στοιχείων του στον πηγαίο κώδικα HTML. Για παράδειγμα, μπορείτε εύκολα να δημιουργήσετε ένα πλέγμα που τοποθετεί τους μετρητές πάνω ή δίπλα στα πεδία εισαγωγής.