Input – eines der am häufigsten verwendeten HTML-Elemente, das zum Erstellen von Formularen auf Webseiten verwendet wird. Mit dem input-Element können Benutzer Daten wie Text, Zahlen oder E-Mail-Adressen eingeben. Manchmal ist es jedoch notwendig, ein Eingabefeld nicht editierbar zu machen, was bedeutet, dass Benutzer den Inhalt des Eingabefelds nicht ändern können.
Um input nicht editierbar zu machen, müssen Sie den Attributen des input-Elements ein Attribut hinzufügen readonly. Um beispielsweise ein Textfeld zu erstellen, das nicht geändert werden kann, fügen Sie dem input-Element das readonly-Attribut hinzu:
Nachdem Sie das readonly-Attribut hinzugefügt haben, wird das Eingabefeld als normales Textfeld angezeigt, Benutzer können den Inhalt jedoch nicht ändern. Dies kann beispielsweise nützlich sein, wenn Sie Benutzern die Möglichkeit geben möchten, Informationen anzuzeigen, aber nicht möchten, dass sie sie ändern können.
Es ist auch erwähnenswert, dass Benutzer den Inhalt eines Eingabefelds kopieren können, obwohl es nicht editierbar ist. Sie können das Attribut verwenden, um zu verhindern, dass der Inhalt eines Felds kopiert wird disabled. Dies macht das Feld jedoch auch unbrauchbar und verhindert, dass Benutzer Formulare senden oder Daten eingeben können.
Wie kann ich das Bearbeiten von input in HTML verhindern
Um das readonly-Attribut auf die input anzuwenden, müssen Sie es der Elementdefinition hinzufügen. Wenn Sie beispielsweise eine input haben, um einen Namen einzugeben, können Sie ihn wie folgt nicht editierbar machen:
In diesem Beispiel wird dem Formular ein Eingabefeld vom Typ "text" mit dem Attribut readonly hinzugefügt. Jetzt kann der Benutzer den Wert in diesem Feld nicht mehr ändern, sondern nur noch anzeigen.
Dieser Ansatz ist nützlich, wenn Sie dem Benutzer die Möglichkeit geben müssen, die Daten zu sehen, sie jedoch nicht bearbeiten zu lassen. Wenn Sie beispielsweise Informationen über einen Benutzer anzeigen und ihm die Möglichkeit geben möchten, diese anzuzeigen, aber nicht zu ändern, können Sie das readonly-Attribut für die Input-Felder verwenden, die diese Informationen enthalten.
Es ist wichtig zu beachten, dass das readonly-Attribut nicht verhindert, dass der Wert dieses Felds beim Senden des Formulars an den Server gesendet wird. Das heißt, der Wert der nicht editierbaren input wird immer noch an den Server übergeben, wenn der Benutzer das Formular sendet.
Wenn Sie die input vollständig nicht editierbar machen und verhindern möchten, dass der Wert an den Server gesendet wird, sollten Sie das Attribut verwenden disabled statt readonly. Im Gegensatz zum readonly-Attribut ändert sich bei Verwendung des disabled-Attributs jedoch auch der Stil des Eingabefeldes, was dem Benutzer helfen kann zu verstehen, dass das Feld inaktiv ist.
Die Verwendung des readonly-Attributs ist eine einfache Möglichkeit, input in HTML nicht editierbar zu machen. Es kann sehr nützlich sein, wenn Sie dem Benutzer Daten anzeigen möchten, die nicht geändert werden sollten. Ein solches Steuerelement zeigt einen Wert an, erlaubt es dem Benutzer jedoch nicht, ihn zu bearbeiten.
Anwenden des readonly-Attributs
In einem HTML-Formular können Sie das readonly-Attribut verwenden, um ein nicht editierbares Eingabefeld zu erstellen. Mit diesem Attribut können Sie Text im Eingabefeld anzeigen, jedoch können Sie ihn nicht ändern.
Um ein readonly-Attribut anzuwenden, müssen Sie es dem input-Tag hinzufügen und den Wert des Attributs auf true setzen. Zum Beispiel:
In diesem Beispiel zeigt das Eingabefeld den Text "Nicht bearbeitbarer Text" an, der Benutzer kann ihn jedoch nicht ändern.
Das readonly-Attribut kann nützlich sein, wenn Benutzer Informationen anzeigen, aber nicht ändern können, z. B. in Formularen zum Bearbeiten von Profilen oder zum Anzeigen von Bestelldetails.
Verwenden der CSS-Eigenschaft pointer-events
CSS-Eigenschaft pointer-events ermöglicht Ihnen, die Interaktion mit einem Element auf einer Webseite mit dem Mauszeiger zu konfigurieren. Es bestimmt, ob ein Element auf Zeigerereignisse wie Mausklicken oder Schweben reagiert.
Häufig wird die pointer-events-Eigenschaft verwendet, um ein Element zu erstellen nicht editierbar. Zum Beispiel, um eine Änderung zu verhindern input sie können die pointer-events-Eigenschaft auf einen Wert festlegen none. Als Ergebnis wird das Element alle Zeigerereignisse ignorieren.
inputAlso, wenn der Benutzer versucht, damit zu interagieren input das Feld ist unbeweglich und reagiert nicht auf Klicks oder Mausbewegungen.
Die pointer-events-Eigenschaft kann nützlich sein, wenn Sie ein Element vorübergehend oder dauerhaft für die Interaktion unzugänglich machen möchten, selbst wenn es auf der Seite sichtbar ist. Dies kann in Situationen nützlich sein, in denen Sie die Eingabe von Daten verhindern oder falsche Benutzeraktionen verhindern möchten.
