Eine detaillierte Erklärung der subtilen Unterschiede zwischen Readonly und Disabled
|
Sowohl die Optionen „Nur lesen“ als auch „Deaktiviert“ verhindern, dass Benutzer den Inhalt von Formularfeldern ändern. Es gibt jedoch subtile Unterschiede zwischen ihnen, die wie folgt zusammengefasst werden können: Readonly ist nur für Eingaben (Text/Passwort) und Textbereiche gültig, während Disabled für alle Formularelemente gültig ist. Wenn jedoch ein Formularelement deaktiviert ist und wir das Formular per POST oder GET übermitteln, wird der Wert dieses Elements nicht weitergegeben, während Readonly den Wert weitergibt (Readonly akzeptiert Wertänderungen und kann zurückgesendet werden, während Disable Änderungen akzeptiert, aber keine Daten zurücksendet). Die häufigsten Situationen sind: In einem Formular ist ein eindeutiger Identifikationscode für den Benutzer vorab eingetragen, den der Benutzer nicht ändern darf. Der Wert muss jedoch beim Absenden übergeben werden. In diesem Fall sollte das Attribut auf schreibgeschützt gesetzt werden. Es kommt häufig vor, dass der Benutzer, nachdem er das Formular offiziell übermittelt hat, warten muss, bis der Administrator die Informationen überprüft hat. Dadurch kann der Benutzer die Daten im Formular nicht ändern, sondern nur anzeigen. Da „Deaktiviert“ eine Vielzahl von Elementen hat, sollte es zu diesem Zeitpunkt verwendet werden. Es ist jedoch zu beachten, dass auch die Schaltfläche „Senden“ deaktiviert werden sollte. Andernfalls wird der Wert in der Datenbank gelöscht, solange der Benutzer diese Schaltfläche drückt und auf der Datenbankbetriebsseite keine Integritätsprüfung durchgeführt wird. Wenn in diesem Fall readonly statt disabled verwendet wird, ist es immer noch in Ordnung, wenn das Formular nur Eingabe- (Text/Passwort) und Textbereichselemente enthält. Wenn andere Elemente vorhanden sind, z. B. select, kann der Benutzer den Wert neu schreiben und zum Senden die Eingabetaste drücken (Eingabe ist die Standardtaste zum Auslösen des Sendens). Wir verwenden häufig JavaScript, um die Schaltfläche „Senden“ zu deaktivieren, nachdem der Benutzer darauf geklickt hat. Dies kann verhindern, dass der Benutzer in einer Umgebung mit schlechten Netzwerkbedingungen wiederholt auf die Schaltfläche „Senden“ klickt, was dazu führt, dass Daten redundant in der Datenbank gespeichert werden. Die Attribute disabled und readonly haben einige Gemeinsamkeiten. Wenn beispielsweise beide auf true gesetzt sind, kann das Formularattribut nicht bearbeitet werden. Beim Schreiben von JS-Code kommt es häufig vor, dass diese beiden Attribute verwechselt werden. Tatsächlich gibt es jedoch einige Unterschiede zwischen ihnen: Wenn die Deaktivierung eines Eingabeelements auf „true“ gesetzt ist, kann das Formulareingabeelement nicht den Fokus erhalten und alle Benutzeroperationen (Mausklicks und Tastatureingaben usw.) sind für das Eingabeelement ungültig. Der wichtigste Punkt ist, dass das Formulareingabeelement beim Absenden des Formulars nicht übermittelt wird. Schreibgeschützt gilt nur für Eingabeelemente wie Texteingabefelder, in die Text eingegeben werden kann. Wenn es auf „true“ gesetzt ist, kann der Benutzer den entsprechenden Text nicht bearbeiten, kann sich aber trotzdem darauf konzentrieren, und beim Senden des Formulars wird das Eingabeelement als Element des Formulars gesendet. |
<<: jQuery implementiert alle Warenkorbfunktionen
>>: Lösen Sie das Problem, dass die mit nginx erhaltene IP-Adresse 127.0.0.1 ist
Artikel empfehlen
Nginx-Konfiguration und -Kompatibilität mit der Codeanalyse der HTTP-Implementierung
Generieren Sie SSL-Schlüssel und CSR-Datei mit Op...
Lösung für das Vue-Routing: Diese Seite mit dem Sprung „this.route.push“ wird nicht aktualisiert
Die Vue-Routing-Seite this.route.push wird nicht ...
Detaillierte Einführung in die Definition und Verwendung des HTML-Thead-Tags
Code kopieren Der Code lautet wie folgt: <thea...
MySQL-Optimierung: So schreiben Sie hochwertige SQL-Anweisungen
Vorwort Im Internet gibt es zahlreiche Informatio...
Ein genauerer Blick auf die Unterschiede zwischen Link und @import
Es gibt drei Hauptmethoden, CSS auf einer Seite zu...
So installieren Sie Docker und konfigurieren Alibaba Cloud Image Accelerator
Docker-Installation Über die Installation auf ein...
JS berechnet die Gewinnwahrscheinlichkeit basierend auf dem Preisgewicht
Inhaltsverzeichnis 1. Beispielszenario 1.1. Legen...
Verwenden Sie crontab, um das Skript zur regelmäßigen Ausführung des JAR-Programms in centOS6 auszuführen
1. Schreiben Sie ein einfaches Java-Programm öffe...
Detaillierte Erklärung des Overflow-Scrollens zur Lösung des Scroll-Lag-Problems
Vorwort Wenn Sie das Attribut „overflow: scroll“ ...
Lösungen für MySQL OOM (Speicherüberlauf)
OOM steht für „Out Of Memory“, was so viel bedeut...
Das WeChat-Applet implementiert den Serveraufbau des Benutzeranmeldemoduls
Ich habe node.js zum Erstellen des Servers gewähl...
Zusammenfassung des Wissens über MySql-Speicher-Engines und Indizes
Speicher-Engine Was ist eine Datenbank-Speicher-E...
Einführung in lokale Komponenten in Vue
In Vue können wir lokale Komponenten selbst defin...
Wie wirkt sich der zusammengesetzte Index von MySQL aus?
Inhaltsverzeichnis Hintergrund Zusammengesetzte I...
Methode zum dynamischen Laden von Geojson basierend auf Vue+Openlayer
Laden eines oder mehrerer Features <Vorlage>...