Heim  >  Artikel  >  Web-Frontend  >  So verarbeiten Sie ein Formular und machen Textfelder wie Eingaben schreibgeschützt und nicht bearbeitbar

So verarbeiten Sie ein Formular und machen Textfelder wie Eingaben schreibgeschützt und nicht bearbeitbar

阿神
阿神Original
2017-03-18 11:23:283200Durchsuche

Methode 1: onfocus=this.blur()

<input type="text" name="input1" value="中国" onfocus=this.blur()>

Methode 2: schreibgeschützt

<input type="text" name="input1" value="中国" readonly> 
<input type="text" name="input1" value="中国" readonly="true">

Methode 3: deaktiviert

<input type="text" name="input1" value="中国" disabled>

Sowohl „Schreibgeschützt“ als auch „Deaktiviert“ können verhindern, dass der Benutzer den Inhalt im Formularfeld ändert. Es gibt jedoch geringfügige Unterschiede zwischen ihnen, die wie folgt zusammengefasst werden:
Readonly ist nur für Eingabe (Text/Passwort) und Textbereich gültig, während „disabled“ für alle Formularelemente gültig ist, aber nachdem das Formularelement „disabled“ verwendet, wenn wir Wenn das Formular per POST oder GET übermittelt wird, wird der Wert dieses Elements nicht weitergegeben, sondern der schreibgeschützte Wert wird weitergegeben (nur lesbar akzeptiert Wertänderungen und kann sie zurückgeben, deaktiviert akzeptiert Änderungen, gibt aber keine Daten zurück).
Allgemeine Situationen sind:
Ein eindeutiger Identifikationscode ist in einem Formular für den Benutzer vorab ausgefüllt und der Benutzer darf ihn nicht ändern, aber der Wert muss beim Absenden übergeben werden. Seine Attribute sollten auf schreibgeschützt gesetzt sein.
Wenn ein Benutzer ein Formular formell absendet 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, da dies deaktiviert ist Bereich von Elementen, daher sollte zu diesem Zeitpunkt Disabled verwendet werden. Gleichzeitig ist jedoch zu beachten, dass die Schaltfläche „Senden“ ebenfalls deaktiviert sein sollte, andernfalls erfolgt keine Integritätsprüfung in der Datenbank, solange der Benutzer diese Schaltfläche drückt Auf der Betriebsseite werden die Werte in der Datenbank gelöscht. Wenn in diesem Fall „readonly“ anstelle von „disabled“ verwendet wird, ist dies immer noch möglich, wenn das Formular nur Eingabeelemente (Text/Passwort) und Textbereichselemente enthält. Wenn andere Elemente wie „select“ vorhanden sind, kann der Benutzer den Wert neu schreiben und drücken Drücken Sie zum Senden die Eingabetaste (Enter ist die Standardschaltfläche zum Senden).
Wir verwenden häufig JavaScript, um die Schaltfläche zum Senden zu deaktivieren, nachdem der Benutzer auf die Schaltfläche zum Senden geklickt hat. Dies kann verhindern, dass Benutzer in einer Umgebung mit schlechten Netzwerkbedingungen wiederholt klicken. Übermitteln-Schaltflächen führen dazu, dass Daten redundant in der Datenbank gespeichert werden.
Die beiden Attribute „disabled“ und „readonly“ haben etwas gemeinsam. Wenn beispielsweise beide auf „true“ gesetzt sind, ist es beim Schreiben von JS-Code oft einfach, diese beiden Attribute zu mischen Es gibt einen gewissen Unterschied:
Wenn die Deaktivierung eines Eingabeelements auf „True“ gesetzt ist, kann das Formulareingabeelement den Fokus nicht erhalten und alle Benutzeroperationen (Mausklicks und Tastatureingaben usw.) sind ungültig Für das Eingabeelement ist der wichtigste Punkt: Wenn das Formular gesendet wird, wird diese Formulareingabe nicht gesendet.
Schreibgeschützt gilt nur für Eingabeelemente wie Texteingabefelder, die Text eingeben können. Wenn der Wert auf „true“ gesetzt ist, kann der Benutzer den entsprechenden Text einfach nicht bearbeiten, kann sich aber trotzdem konzentrieren, und beim Absenden des Formulars wird das Eingabeelement verwendet als Einreichen des Formulars.

Einige Leistungsprobleme:
Der Unterschied zwischen „display: none“ und „visibility:hidden“ besteht darin, dass „visibility:hidden“ den Platz des Elements beibehält
repaint (repaint ), repaint Wenn eine Änderung auftritt, wird das Erscheinungsbild des Elements geändert, und zwar ohne Änderung des Layouts. Beispielsweise hat eine Änderung der Umriss-, Sichtbarkeits- und Hintergrundfarbe keine Auswirkungen auf die Darstellung der DOM-Struktur.
Reflow (Rendering), der Unterschied zu Repaint besteht darin, dass es sich auf das Rendering der Dom-Struktur auswirkt und gleichzeitig Repaint auslöst, sich selbst und alle übergeordneten Elemente (Vorfahren) ändert. Dieser Aufwand ist sehr hoch teuer, was zu Leistungseinbußen führt. Der Rückgang ist unvermeidlich, und je mehr Seitenelemente vorhanden sind, desto offensichtlicher wird der Effekt sein.
Display:none generiert also einen Reflow
visibility:hidden löst nur ein Repaint aus

Verwandte Artikel:

js setzt das Eingabetextfeld auf schreibgeschützt

Alle Formularobjekte über js als schreibgeschützt festlegen

Verwenden Sie js, um das schreibgeschützte Attribut des Eingabefelds dynamisch zu steuern

Das obige ist der detaillierte Inhalt vonSo verarbeiten Sie ein Formular und machen Textfelder wie Eingaben schreibgeschützt und nicht bearbeitbar. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!

Stellungnahme:
Der Inhalt dieses Artikels wird freiwillig von Internetnutzern beigesteuert und das Urheberrecht liegt beim ursprünglichen Autor. Diese Website übernimmt keine entsprechende rechtliche Verantwortung. Wenn Sie Inhalte finden, bei denen der Verdacht eines Plagiats oder einer Rechtsverletzung besteht, wenden Sie sich bitte an admin@php.cn