Σε αυτόν τον οδηγό, θα κατανοήσουμε πώς να απενεργοποιήσετε το πεδίο εισαγωγής χρησιμοποιώντας CSS. Λοιπόν, Ας ξεκινήσουμε!
Πώς να απενεργοποιήσετε ένα πεδίο εισαγωγής χρησιμοποιώντας CSS;
Στο CSS, τα συμβάντα απενεργοποιούνται χρησιμοποιώντας το ' δείκτες-γεγονότα ” ιδιοκτησία. Έτσι, πρώτα, μάθετε για την ιδιότητα pointer-events.
Τι είναι η ιδιότητα CSS 'pointer-events';
Ο ' δείκτες-γεγονότα ” ελέγξτε τον τρόπο με τον οποίο τα στοιχεία HTML ανταποκρίνονται ή συμπεριφέρονται στο συμβάν αφής, όπως συμβάντα κλικ ή πάτημα, ενεργές καταστάσεις ή καταστάσεις τοποθέτησης του ποντικιού και εάν ο κέρσορας είναι ορατός ή όχι.
Σύνταξη
Η σύνταξη των συμβάντων-δείκτη δίνεται ως εξής:
δείκτες-γεγονότα : αυτο | κανένας ;
Η παραπάνω ιδιότητα λαμβάνει δύο τιμές, όπως ' αυτο ' και ' κανένας ”:
- αυτο: Χρησιμοποιείται για την εκτέλεση προεπιλεγμένων συμβάντων.
- κανένας: Χρησιμοποιείται για την απενεργοποίηση συμβάντων.
Κατευθυνθείτε προς το δεδομένο παράδειγμα.
Παράδειγμα 1: Προσθήκη πεδίου εισαγωγής με χρήση CSS
Σε αυτό το παράδειγμα, αρχικά, θα δημιουργήσουμε ένα div και θα προσθέσουμε μια επικεφαλίδα και ένα πεδίο εισαγωγής σε αυτό. Στη συνέχεια, ορίστε τον τύπο εισόδου ως ' κείμενο ' και ορίστε την τιμή του ως ' Εισάγετε το όνομά σας '.
HTML
< div >< κέντρο >
< h1 > Απενεργοποιήστε ένα πεδίο εισαγωγής < / h1 >
< εισαγωγή τύπος = 'κείμενο' αξία = 'Εισάγετε το όνομά σας' >
< / κέντρο >
< / div >
Μετά από αυτό, μεταβείτε στο CSS και διαμορφώστε το div ορίζοντας το χρώμα φόντου του ως ' rgb(184, 146, 99) 'και ύψος ως ' 150 εικονοστοιχεία '.
CSS
div {Ιστορικό- χρώμα : rgb ( 184 , 146 , 99 ) ;
ύψος : 150 px;
}
Η έξοδος του κώδικα που περιγράφεται παραπάνω δίνεται παρακάτω. Εδώ, μπορούμε να δούμε ότι το πεδίο εισαγωγής μας είναι ενεργό αυτήν τη στιγμή και δέχεται την είσοδο από τον χρήστη:
Τώρα, μεταβείτε στο επόμενο μέρος στο οποίο χρησιμοποιούμε την τιμή του ' δείκτες-γεγονότα 'περιουσία ως ' κανένας '.
Παράδειγμα 2: Απενεργοποίηση πεδίου εισαγωγής με χρήση CSS
Τώρα θα χρησιμοποιήσουμε ' εισαγωγή ' για να αποκτήσετε πρόσβαση στο στοιχείο που προστέθηκε στο αρχείο HTML και να ορίσετε την τιμή των συμβάντων δείκτη ως ' κανένας ”:
εισαγωγή {δείκτες-γεγονότα : κανένας ;
}
Μόλις εφαρμόσετε την παραπάνω ιδιότητα ' δείκτες-γεγονότα ' με ' κανένας ', το κείμενο του πεδίου εισαγωγής δεν θα είναι επεξεργάσιμο, γεγονός που υποδεικνύει ότι το πεδίο εισαγωγής μας είναι απενεργοποιημένο:
Αυτό είναι! Έχουμε εξηγήσει τη μέθοδο απενεργοποίησης του πεδίου εισαγωγής χρησιμοποιώντας CSS.
συμπέρασμα
Για να απενεργοποιήσετε ένα πεδίο εισαγωγής σε ένα HTML, το ' δείκτες-γεγονότα Χρησιμοποιείται η ιδιότητα του CSS. Για να το κάνετε αυτό, προσθέστε ένα πεδίο εισαγωγής και ορίστε την τιμή των συμβάντων δείκτη ως ' κανένας ” για να απενεργοποιήσετε το πεδίο εισαγωγής. Σε αυτόν τον οδηγό, εξηγούμε τη μέθοδο απενεργοποίησης ενός πεδίου εισαγωγής χρησιμοποιώντας CSS και παρέχουμε ένα παράδειγμα αυτής.