So machen Sie Eingabeelemente mithilfe von CSS schreibgeschützt

In der Webentwicklung sind Formularelemente ein sehr häufiger Elementtyp. Das Eingabeelement ist eines davon, das Benutzereingaben akzeptieren kann, einschließlich Text, Zahlen, Datumsangaben usw. Aber manchmal müssen wir das Eingabeelement auf schreibgeschützt setzen, was bedeutet, dass der Benutzer nichts eingeben und es nur anzeigen kann. In diesem Artikel wird erläutert, wie Sie mithilfe von CSS ein Eingabeelement schreibgeschützt machen.

Schauen wir uns zunächst an, wie ein normales Eingabeelement erstellt wird:

<input type="text" name="username" id="username">

Dies ist ein einfaches Texteingabefeld, in das der Benutzer alles eingeben kann. Als nächstes müssen wir es auf schreibgeschützt setzen. Dazu können wir das „readonly“-Attribut des Eingabeelements wie unten gezeigt verwenden:

<input type="text" name="username" id="username" readonly>

Wenn das „readonly“-Attribut gesetzt ist, kann der Benutzer keinen Text eingeben. Diese Methode weist jedoch einen Fehler auf: Der Benutzer kann die Attribute des Eingabeelements über das Bearbeitungstool ändern und bearbeitbar machen. Daher müssen wir CSS verwenden, um den schreibgeschützten Status des Eingabeelements zu steuern, um sicherzustellen, dass es unter allen Umständen schreibgeschützt ist.

Schreibgeschützte Eingabeelemente mit CSS festlegen

So setzen wir Eingabeelemente mit CSS auf schreibgeschützt. Zuerst verwenden wir den Selektor „input[readonly]“, um alle Eingabeelemente auszuwählen, die das Attribut „readonly“ enthalten, und dann fügen wir die CSS-Stileigenschaften „pointer-events:none“ und „background-color:#eee“ hinzu Es.

input[readonly] {
   pointer-events:none;
   background-color:#eee;
}

Das Attribut „pointer-events:none“ verhindert, dass der Benutzer Vorgänge am schreibgeschützten Eingabeelement über die Maus oder ein anderes Zeigegerät ausführt, wie z. B. Klicks, Mausbewegungen hinein/heraus usw. Es stellt sicher, dass Eingabeelemente von Benutzern nicht falsch bedient werden.

Das Attribut „background-color:#eee“ dient dazu, schreibgeschützte Eingabeelemente von anderen bearbeitbaren Eingabeelementen zu unterscheiden und so die Unterscheidung zu erleichtern.

Dies ist ein vollständiger CSS-Stil für ein schreibgeschütztes Eingabeelement:

input[readonly] {
   pointer-events:none;
   background-color:#eee;
   border:none;
   color:#999;
}

In diesem Stil haben wir auch die Attribute „border:none“ und „color:#999“ hinzugefügt. Dadurch werden schreibgeschützte Eingabeelemente dunkler, um sie von anderen bearbeitbaren Elementen zu unterscheiden.

Natürlich können Sie diese Stile an Ihre Bedürfnisse anpassen. Sie können beispielsweise die Hintergrundfarbe eines schreibgeschützten Eingabeelements auf Grau und die Schriftfarbe auf Dunkelgrau einstellen, um besser zum Stil Ihrer Website zu passen.

Eine letzte Sache, die Sie beachten sollten, ist, dass die Verwendung von CSS zum Festlegen eines schreibgeschützten Eingabeelements zwar sicherstellt, dass es unter allen Umständen schreibgeschützt ist, die vom Server kommenden Daten jedoch dennoch validiert und gefiltert werden müssen. Insbesondere die Prüfung und Verarbeitung von Formulardaten ist mit Vorsicht zu genießen.

Fazit

CSS ist ein sehr leistungsfähiges Tool, mit dem wir den Stil von Elementen auf unserer Website, einschließlich des schreibgeschützten Status von Eingabeelementen, einfach steuern können. Durch die Verwendung von „pointer-events:none“ und „background-color:#eee“ können wir sicherstellen, dass das Eingabeelement unter allen Umständen schreibgeschützt ist und Fehlbedienungen des Benutzers vermeiden. Gleichzeitig müssen wir auch auf die Überprüfung und Filterung von Formulardaten achten, um die Datensicherheit zu gewährleisten.

Das obige ist der detaillierte Inhalt vonSo machen Sie Eingabeelemente mithilfe von CSS schreibgeschützt. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!