So machen Sie Formulareingaben und andere Textfelder in HTML schreibgeschützt und nicht bearbeitbar

Manchmal möchten wir, dass die Textfelder im Formular schreibgeschützt sind, sodass Benutzer die darin enthaltenen Informationen nicht ändern können. Beispielsweise kann der Inhalt von <input type="text" name="input1" value="中国"> so festgelegt werden, dass das Wort "中国" nicht geändert werden kann. Zusammenfassend lässt sich sagen, dass es mehrere Möglichkeiten zur Implementierung gibt.

Methode 1: onfocus=this.blur() verliert den Fokus, wenn die Maus nicht platziert werden kann
<input type="text" name="input1" value="Englisch" onfocus=this.blur()>

Methode 2: schreibgeschützt
<Eingabetyp="Text" Name="Eingabe1" Wert="Englisch" schreibgeschützt>
<Eingabetyp="Text" Name="Eingabe1" Wert="Standard" schreibgeschützt="true">

Methode 3: deaktiviert
<Eingabetyp="Text" Name="Eingabe1" Wert="Deutsch" deaktiviert="true">

Vollständiges Beispiel:

<input name="ly_qq" type="text" tabindex="2" onMouseOver="this.className='input_1'" onMouseOut="this.className='input_2'" value="123456789" disabled="true" readOnly="true" />

disabled="true" Wenn diese Option aktiviert ist, wird der Text grau und kann nicht bearbeitet werden.
readOnly="true" Text ändert seine Farbe nicht und ist nicht editierbar

CSS-Abschirmungseingabe: <input style="ime-mode: disabled">

Es gibt zwei Methoden: Erstens: disabled="disabled". Nach dieser Definition ist das deaktivierte Eingabeelement weder verfügbar noch anklickbar. Zweitens: readonly="readonly" schreibgeschützte Felder können nicht geändert werden. Benutzer können jedoch weiterhin mit der Tabulatortaste zum Feld wechseln und dessen Text auswählen oder kopieren.

<<: TortoiseSvn Little Turtle Installation Neuestes ausführliches Grafik-Tutorial

>>: Designtheorie: Hierarchie im Design

So machen Sie Formulareingaben und andere Textfelder in HTML schreibgeschützt und nicht bearbeitbar

Anfänger lernen einige HTML-Tags (3)

Detaillierte Erklärung der JavaScript-Funktion dieses Zeigeproblems

Codebeispiele für den Import und Export von Docker-Images

Das Raster ist Ihr Layoutplan für die Seite

Detaillierte Erläuterung der Docker-Container-Cross-Host-Multi-Netzwerksegment-Kommunikationslösung

HTML + CSS + JS realisiert, dass die Leinwand dem Quellcode für Spezialeffekte des kleinen Kreises der Maus folgt

Lassen Sie uns über Destrukturierung in JS ES6 sprechen

Native JS-Implementierung des Ladefortschrittsbalkens

Installieren Sie den NVIDIA-Grafiktreiber unter Ubuntu (einfache Installationsmethode).

Benutzerdefiniertes JavaScript-Plug-In zum Implementieren der Tab-Umschaltfunktion

Artikel empfehlen

Ein Tutorial für Anfänger zur Installation und Anmeldung bei mysql-8.0.19-winx64 (unbedingt für Anfänger lesen)

Einfacher CSS-Textanimationseffekt

Ajax jquery realisiert den Aktualisierungseffekt eines Div auf der Seite

Einfache Implementierungsmethode der bidirektionalen Datenbindung im JS-Projekt

Tutorial zur Installation und Konfiguration der kostenlosen Installationsversion von MySQL 5.7.20\5.7.21

Tutorial zur MySQL-Infrastruktur: Detaillierte Erläuterung des Ausführungsprozesses von Abfrageanweisungen

Beispielcode zum Ändern des Textstils der Eingabeaufforderung in HTML

Einfache Analyse von EffectList in React

Mehrere Möglichkeiten, Python-Programme im Linux-Hintergrund auszuführen

Detaillierte Erklärung des this-Pointing-Problems von JavaScript-Prototypobjekten

Grafisches Tutorial zur Installation von MySQL 5.7.17 (Windows)

Lösung für das Problem, dass bei der Installation von Centos7 mit VmWare kein Zugriff auf das Internet möglich ist

So legen Sie MySQL-Fremdschlüssel für Anfänger fest

MySQL verwendet Variablen, um verschiedene Sortierungen zu implementieren

Detaillierte Analyse der Syntax von Mysql-Updates zum Ändern mehrerer Felder und