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
Artikel empfehlen
Zusammenfassung der Docker-Datenspeicherung
Bevor Sie diesen Artikel lesen, hoffe ich, dass S...
Detaillierte Schritte zum Konfigurieren der MySQL-Remoteverbindung unter Alibaba Cloud
Vorwort Wie wir alle wissen, unterstützt das auf ...
JS implementiert Layoutkonvertierung in Animation
Beim Schreiben von Animationen mit JS wird häufig...
Analyse und Lösung eines Fehlalarmproblems bei der langsamen MySQL-Protokollüberwachung
Früher wurden manche Alarme aus verschiedenen Grü...
Das WeChat-Applet implementiert eine einfache handschriftliche Signaturkomponente
Inhaltsverzeichnis Hintergrund: brauchen: Wirkung...
Problem der Inkonsistenz der MySQL-Multiplikations- und Divisionsgenauigkeit (vier Dezimalstellen nach der Division)
Frage Als ich heute eine Projektfunktion schrieb,...
Erläuterung unveränderlicher Werte in React
Inhaltsverzeichnis Was sind unveränderliche Werte...
Ein grafisches Tutorial zur Installation von MySQL unter Windows
Zusammenfassung: Dieser Artikel erläutert hauptsä...
Implementierung der Wiederaufnahme des K8S-Knotens in den Master-Cluster
1. Knoten löschen Führen Sie kubectl delete node ...
Eine kurze Diskussion über die MySQL-Optimierungslösung für große Tabellen
Hintergrund Die Menge neuer Daten in der Geschäft...
Tutorial zur Installation von Nginx in einer Linux-Umgebung
Inhaltsverzeichnis 1. Installieren Sie die erford...
Details zum Prototypmodus des Javascript-Entwurfsmusters
Inhaltsverzeichnis 1. Prototyp-Modus Beispiel 1 B...
Der gesamte Prozess der Installation und Konfiguration von Harbor1.7 auf CentOS7.5
1. Laden Sie die erforderlichen Pakete herunter w...
Welche Bilddateiformate gibt es und wie wählt man sie aus?
1. Welche drei Formate? Dies sind: gif, jpg und pn...
Tutorial zur Implementierung von Tabellenladebaumdaten in der Vue-Komponentenbibliothek ElementUI
ElementUI implementiert ein Tutorial zum Laden vo...