Heim  >  Artikel  >  Web-Frontend  >  Vertiefendes Verständnis des Unterschieds zwischen schreibgeschützt und deaktiviert in Formularformularen

Vertiefendes Verständnis des Unterschieds zwischen schreibgeschützt und deaktiviert in Formularformularen

WBOY
WBOYnach vorne
2016-05-16 12:03:253110Durchsuche

Dieser Artikel stellt hauptsächlich den Unterschied zwischen schreibgeschützt und deaktiviert vor. Er ist sehr detailliert und umfassend. Freunde, die die relevanten Informationen kennen müssen, sollten ihn sorgfältig studieren.

Readonly ist nur für die Eingabe (Text/Passwort) und den Textbereich gültig, während „Disabled“ für alle Formularelemente gültig ist, einschließlich Auswahl, Radio, Kontrollkästchen, Schaltfläche usw.

Aber nachdem das Formularelement deaktiviert ist und wir das Formular per POST oder GET senden, wird der Wert dieses Elements nicht weitergegeben, und readonly wird den Wert weitergeben (in diesem Fall Erscheint, wenn wir festlegen das Textbereichselement in einem Formular auf deaktiviert oder schreibgeschützt setzen, aber die Schaltfläche „Senden“ kann verwendet werden).

Allgemein häufige Situationen sind:

Ein eindeutiger Identifikationscode ist für den Benutzer in einem Formular vorab ausgefüllt und der Benutzer darf ihn nicht ändern, aber der Wert muss wann übergeben werden Senden. Diese Eigenschaft sollte auf „readonly“ gesetzt werden.

Wenn ein Benutzer ein Formular offiziell einreicht und auf die Überprüfung der Informationen durch den Administrator warten muss, darf der Benutzer die Daten im Formular nicht ändern, sondern kann sie nur anzeigen Aufgrund der großen Auswahl an deaktivierten Elementen sollte zu diesem Zeitpunkt deaktiviert verwendet werden. Gleichzeitig ist jedoch zu beachten, dass die Schaltfläche „Senden“ auch deaktiviert sein sollte. Andernfalls drückt der Benutzer diese Schaltfläche, sofern vorhanden Keine Integritätsprüfung auf der Datenbankbetriebsseite, die Werte in der Datenbank werden gelöscht.

Wenn in diesem Fall nur „readonly“ anstelle von „disabled“ verwendet wird, ist es immer noch möglich, wenn das Formular nur Eingabe- (Text/Passwort) und Textbereichselemente enthält Der Benutzer kann nach dem Umschreiben des Werts die Eingabetaste drücken, um ihn zu senden (die Eingabetaste ist die standardmäßige Auslösetaste für die Übermittlung).

Wir verwenden häufig JavaScript, um die Schaltfläche „Senden“ zu deaktivieren, nachdem der Benutzer die Schaltfläche „Senden“ gedrückt hat. Dies kann dazu führen, dass der Benutzer in einer Umgebung mit schlechten Netzwerkbedingungen wiederholt auf die Schaltfläche „Senden“ klickt, was dazu führt, dass Daten redundant gespeichert werden Datenbank.

Die beiden Attribute „disabled“ und „readonly“ haben etwas gemeinsam. Wenn beispielsweise beide auf „true“ gesetzt sind, kann das Formularattribut beim Schreiben von JS-Code oft nicht bearbeitet werden , sie Es gibt einen gewissen Unterschied zwischen ihnen.

Wenn die Deaktivierung eines Eingabeelements auf „True“ gesetzt ist, kann das Formulareingabeelement keinen Fokus erhalten und alle Benutzervorgänge (Mausklicks und Tastatureingaben usw.) sind für das Eingabeelement ungültig Der Punkt ist, dass diese Formulareingabe beim Absenden des Formulars nicht übermittelt wird.

Schreibgeschützt gilt nur für Eingabeelemente wie Texteingabefelder, in die Text eingegeben werden kann. Wenn der Wert auf „true“ gesetzt ist, kann der Benutzer den entsprechenden Text einfach nicht bearbeiten, kann sich aber beim Absenden des Formulars weiterhin auf die Eingabe konzentrieren Der Artikel wird als Artikel im Formular eingereicht.

JQuery-Einstellung und Entfernung des deaktivierten Attributs

//Zwei Methoden zum Festlegen des deaktivierten Attributs

$('#areaSelect').attr( "disabled ",true);

$('#areaSelect').attr("disabled","disabled");

//Drei Methoden zum Entfernen des deaktivierten Attributs

$('#areaSelect').attr("disabled",false);

$('#areaSelect').removeAttr("disabled");

$(' #areaSelect ').attr("disabled","");

Das Obige ist der gesamte Inhalt dieses Artikels, ich hoffe, er gefällt euch allen.

【Empfohlene verwandte Tutorials】

1. CSS-Video-Tutorial
2. CSS-Online-Handbuch
3 Bootstrap-Tutorial

Stellungnahme:
Dieser Artikel ist reproduziert unter:cnblogs.com. Bei Verstößen wenden Sie sich bitte an admin@php.cn löschen