In dieser Anleitung lernen wir, wie Sie das Eingabefeld mit CSS deaktivieren können. Also, fangen wir an!
Wie deaktiviere ich ein Eingabefeld mit CSS?
In CSS werden Ereignisse durch die Verwendung des „ Zeigerereignisse ' Eigentum. Lernen Sie also zunächst die Eigenschaft pointer-events kennen.
Was ist die CSS-Eigenschaft „Zeigerereignisse“?
Das ' Zeigerereignisse ” steuern, wie die HTML-Elemente auf das Berührungsereignis reagieren oder sich verhalten, z. B. Klick- oder Tippereignisse, aktive oder schwebende Zustände, und ob der Cursor sichtbar ist oder nicht.
Syntax
Die Syntax von Zeigerereignissen ist wie folgt angegeben:
Zeigerereignisse : Auto | keiner ;
Die oben erwähnte Eigenschaft nimmt zwei Werte an, z. B. „ Auto ' und ' keiner “:
- Auto: Es wird verwendet, um Standardereignisse auszuführen.
- keiner: Es wird verwendet, um Ereignisse zu deaktivieren.
Gehen Sie in Richtung des angegebenen Beispiels.
Beispiel 1: Hinzufügen eines Eingabefelds mit CSS
In diesem Beispiel erstellen wir zunächst ein div und fügen ihm eine Überschrift und ein Eingabefeld hinzu. Stellen Sie dann den Eingabetyp als „ Text “ und setzen Sie seinen Wert als „ Gib deinen Namen ein “.
HTML
< div >< Center >
< h1 > Ein Eingabefeld deaktivieren < / h1 >
< Eingang Typ = 'Text' Wert = 'Gib deinen Namen ein' >
< / Center >
< / div >
Wechseln Sie danach zum CSS und gestalten Sie das div, indem Sie seine Hintergrundfarbe als „ RGB(184, 146, 99) “ und Höhe als „ 150px “.
CSS
div {Hintergrund- Farbe : RGB ( 184 , 146 , 99 ) ;
Höhe : 150px;
}
Die Ausgabe des oben beschriebenen Codes ist unten angegeben. Hier können wir sehen, dass unser Eingabefeld derzeit aktiv ist und die Eingabe des Benutzers akzeptiert:
Fahren Sie nun mit dem nächsten Teil fort, in dem wir den Wert von „ Zeigerereignisse „Eigentum als“ keiner “.
Beispiel 2: Deaktivieren eines Eingabefelds mit CSS
Wir verwenden jetzt „ Eingang “, um auf das in der HTML-Datei hinzugefügte -Element zuzugreifen und den Wert von pointer-events als „ keiner “:
Eingang {Zeigerereignisse : keiner ;
}
Sobald Sie die oben genannte Eigenschaft „ Zeigerereignisse ' mit ' keiner ” Wert, ist der Text des Eingabefelds nicht bearbeitbar, was darauf hinweist, dass unser Eingabefeld deaktiviert ist:
Das ist es! Wir haben die Methode zum Deaktivieren des Eingabefelds mit CSS erklärt.
Fazit
Um ein Eingabefeld in einem HTML zu deaktivieren, muss das „ Zeigerereignisse ”-Eigenschaft des CSS verwendet. Fügen Sie dazu ein Eingabefeld hinzu und setzen Sie den Wert von pointer-events auf „ keiner “, um das Eingabefeld zu deaktivieren. In dieser Anleitung erklären wir die Methode zum Deaktivieren eines Eingabefelds mit CSS und geben ein Beispiel dafür.