Jquery-Eingaben können niemals bearbeitet werden

In diesem Artikel erfahren Sie, wie Sie mit jQuery das Eingabefeld des Formulars nicht mehr bearbeiten können.

In vielen Anwendungen verwenden wir normalerweise das Eingabeelement, eines der grundlegenden HTML-Elemente zum Empfangen von Texteingaben. In manchen Fällen möchten wir einige Eingabefelder auf den schreibgeschützten Modus setzen, um zu verhindern, dass Benutzer die Eingabefelder bearbeiten. Dies kann daran liegen, dass der Textinhalt von einer Datenbank oder API generiert wird oder so eingestellt ist, dass er Missbrauch verhindert.

Um das Eingabefeld in den schreibgeschützten Zustand zu versetzen, müssen wir im Backend im Allgemeinen die Ausgabe von HTML-Attributen (z. B. schreibgeschützt) steuern. In einigen Fällen haben wir jedoch möglicherweise keinen Zugriff auf den Backend-Code oder können die HTML-Attribute nicht einfach ändern. In diesem Fall können wir diese Situation mithilfe von jQuery bewältigen.

Hier sind einige Beispiele, die zeigen, wie Sie mit jQuery ein Eingabefeld in den schreibgeschützten Zustand versetzen:

Beispiel 1: Verwendung der .prop-Methode

Die .prop()-Methode in jQuery wird zum Abrufen oder Festlegen von Eigenschaften verwendet Werte. Mit der Methode .prop() können Sie ein Eingabefeld in den schreibgeschützten Modus versetzen. Der folgende Code zeigt, wie Sie die Methode .prop() verwenden, um dies zu erreichen:

<!-- HTML -->
<input type="text" id="myInput" value="只读输入框">

<!-- JavaScript & jQuery -->
$(document).ready(function() {
    $('#myInput').prop('readonly', true);
});

Auf diese Weise wird das Eingabefeld auf den schreibgeschützten Modus gesetzt und der Benutzer kann den darin enthaltenen Text nicht bearbeiten. Wenn wir den Wert des Eingabefelds ändern müssen, müssen wir nur die .val()-Methode von jQuery verwenden.

Beispiel 2: Verwendung der .attr-Methode

Das obige Beispiel zeigt, wie die .prop()-Methode verwendet wird, um das Eingabefeld in den schreibgeschützten Modus zu versetzen. In einigen Fällen funktioniert die prop()-Methode jedoch möglicherweise nicht ordnungsgemäß. In einigen Versionen von jQuery kann prop beispielsweise nur Elemente steuern, die nach dem Laden des Dokuments vorhanden sind, und ist möglicherweise nicht wirksam für nachfolgende Elemente, die über AJAX oder andere Methoden hinzugefügt werden. An dieser Stelle können wir die Methode .attr() anstelle der Methode .prop() verwenden. Hier ist ein Beispielcode, der die Methode .attr() verwendet:

<!-- HTML -->
<input type="text" id="myInput" value="只读输入框">

<!-- JavaScript & jQuery -->
$(document).ready(function() {
    $('#myInput').attr('readonly', 'readonly');
});

Dieser Code setzt auch das Eingabefeld in den schreibgeschützten Modus. Mit der Methode „removeAttre()“ können wir das readonly-Attribut löschen, sodass das Eingabefeld erneut bearbeitet werden kann.

Beispiel 3: Verwendung von CSS

Die Methoden der beiden oben genannten Beispiele dienen dazu, den Attributwert des Elements direkt zu ändern. Die Implementierung ist einfach, kann jedoch die Reinheit von HTML zerstören. Wenn wir das Eingabefeld unbearbeitbar machen möchten, ohne den Elementattributwert zu ändern, können wir es mithilfe von CSS-Stilen steuern. Insbesondere können Sie CSS-Stile für Eingabeelemente festlegen, um eine Bearbeitung durch Benutzer zu verhindern. Das Folgende ist ein Beispielcode mit CSS:

<!-- HTML -->
<input type="text" id="myInput" value="只读输入框">

<!-- CSS -->
input[readonly] {
  background-color: #eee;
  cursor: not-allowed;
}

<!-- JavaScript & jQuery -->
$(document).ready(function() {
    $('#myInput').attr('readonly', 'readonly');
});

Dieser Code fügt Stile zu allen Eingabefeldern mit schreibgeschützten Attributen hinzu, wodurch sie einen grauen Hintergrund haben und ein verbotenes Symbol anzeigen, wodurch Benutzer an der Bearbeitung gehindert werden. Diese Methode ist nicht auf JavaScript angewiesen und ändert keine HTML-Attributwerte. Wenn wir das Eingabefeld auf bearbeitbar zurücksetzen müssen, müssen wir nur input[readonly] und die entsprechenden Regeln in CSS entfernen.

Zusammenfassung teilen

In Anwendungen ist es manchmal notwendig, das Eingabefeld auf den schreibgeschützten Modus zu setzen. Mit jQuery kann dies leicht erreicht werden, um zu verhindern, dass Benutzer Fehler machen. Wir können die Methoden .prop() und .attr() verwenden, um Elementattributwerte zu ändern, oder wir können CSS-Stile verwenden, um das Eingabefeld als nicht bearbeitbar zu steuern. Darüber hinaus können wir auch einige andere Methoden verwenden, um denselben Zweck zu erreichen, z. B. das deaktivierte Attribut des Eingabeelements auf „true“ zu setzen oder verschiedene jQuery-Plug-Ins zu verwenden. Das in diesem Artikel gezeigte Beispiel ist nur eine der jQuery-Implementierungsmethoden, und der Leser kann entsprechend den tatsächlichen Anwendungsanforderungen auswählen.

Das obige ist der detaillierte Inhalt vonJquery-Eingaben können niemals bearbeitet werden. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!