Was bedeutet, dass die CSS-Eingabe nicht bearbeitet werden kann?

Im Frontend-Entwicklungsprozess ist das Eingabeelement eines der am häufigsten verwendeten Formularsteuerelemente. In einigen Sonderfällen müssen wir Benutzer daran hindern, das Eingabeelement zu ändern. Derzeit denken wir normalerweise darüber nach, das CSS-Attribut des Eingabeelements festzulegen, um diese Anforderung zu erfüllen. Tatsächlich ist dies jedoch keine praktikable Lösung.

In CSS gibt es tatsächlich einige verwandte Attribute, die verwendet werden können, um das Verhalten und den Stil von Eingabeelementen zu steuern, wie zum Beispiel die Attribute disabled und readonly. Diese Attribute ändern jedoch nicht unbedingt die CSS-Attribute des Eingabeelements, sondern ändern die zulässigen Interaktionsmethoden, um den Effekt eines Verbots oder eines schreibgeschützten Zugriffs zu erzielen. disabled 和 readonly 属性。但这些属性本质上并不是修改 input 元素的CSS 属性，而是改变其允许的交互方式，达到禁止或只读的效果。

我们常常会尝试使用 CSS 属性来实现 input 不可编辑的需求，比如：

input {
  pointer-events: none;
  user-select: none;
  color: gray;
  background-color: #fafafa;
}

这样的 CSS 代码看起来很直接，但实际上却无效，因为 CSS 样式不能直接控制 input 元素中的值。无论你怎么设置，使用 input 元素的 value 属性都可以在 JavaScript 中被修改。

那么，为什么不能直接在 CSS 中修改 input 元素的样式和值？这和 input 元素的特性和用途有关。

首先， input 元素的值应该是由用户自主输入或从其他来源获取，而程序员不应该因为自己的需求而强行修改它。因此，只能通过设置 input 的 disabled 或 readonly

Wir versuchen oft, CSS-Eigenschaften zu verwenden, um die Anforderung zu erfüllen, dass die Eingabe nicht bearbeitet werden kann, wie zum Beispiel:

<input type="text" id="myInput" disabled>

Ein solcher CSS-Code sieht sehr einfach aus, ist aber tatsächlich ineffektiv, da CSS-Stile den Wert im Eingabeelement nicht direkt steuern können . Unabhängig davon, wie Sie es einrichten, kann es in JavaScript mithilfe des value-Attributs des Eingabeelements geändert werden.

1. Warum können Stil und Wert des Eingabeelements nicht direkt in CSS geändert werden? Dies hängt mit den Eigenschaften und dem Zweck des Eingabeelements zusammen.
2. Zuallererst sollte der Wert des Eingabeelements vom Benutzer unabhängig eingegeben oder aus anderen Quellen bezogen werden, und Programmierer sollten ihn nicht aufgrund ihrer eigenen Bedürfnisse gewaltsam ändern. Daher können Sie nur sicherstellen, dass der Wert nicht geändert wird, indem Sie das Attribut disabled oder readonly der Eingabe festlegen.
3. Gleichzeitig wurde dem Eingabeelement von Beginn des Designs an eine einzigartige Semantik verliehen. Auf einer Webseite ist die Eingabe ein Steuerelement, mit dem Benutzereingabedaten abgerufen werden. Die Eingabedaten werden zur Verarbeitung an den Hintergrundserver gesendet. Wenn der Programmierer den Stil und den Wert der Eingabe direkt steuern kann, können einige unvorhersehbare Risiken auftreten, wie zum Beispiel:

Schädliche Programme können JavaScript oder Browsererweiterungen verwenden, um den Wert der Eingabe zu manipulieren und dadurch unangemessene Übermittlungen einzureichen Name des Benutzers.

Böswillige Website-Angreifer verwenden möglicherweise CSS-Angriffe, um Eingabedaten zu verbergen und Benutzerinformationen zu fälschen.
1. Schwierigkeit bei der Wartung: Wenn Stile und Werte gleichzeitig Änderungsbeschränkungen unterliegen Es ist sehr schwierig, diese Eingabeelemente zu pflegen.

Daher können wir den Wert des Eingabeelements grundsätzlich nicht direkt ändern. In einigen notwendigen Fällen können wir jedoch immer noch den unbearbeitbaren Zustand der Eingabe durch Code erreichen. Hier sind mehrere gängige Implementierungsmethoden:

2. Verwenden Sie das deaktivierte Attribut.

Das deaktivierte Attribut gehört zum Eingabesteuerelement selbst. Wenn Sie es festlegen, wird das Eingabeelement grau und kann nicht geändert werden. Dies liegt daran, dass nicht verfügbare Steuerelemente nicht auf Interaktionsereignisse reagieren, einschließlich Klicks und Tastatureingaben. Dies ist eine sehr sichere und einfach umzusetzende Methode.

<input type="text" id="myInput" readonly>

3. Verwenden Sie das Attribut „readonly“

Das Attribut „readonly“ ist ein weiteres Attribut des Eingabesteuerelements selbst. Im Vergleich zu „disabled“ macht „readonly“ das Eingabeelement nur schreibgeschützt und ändert sein Aussehen nicht. Das bedeutet, dass Sie weiterhin CSS verwenden können, um den Stil des Eingabeelements zu ändern, aber Sie können seinen Wert nicht ändern. Diese Eigenschaft wirkt sich jedoch nur auf den Benutzer aus und der Wert kann weiterhin mithilfe von JavaScript oder Backend-Code geändert werden.

<input type="text" id="myInput" onkeyup="storeInputValue(this)" >

<script>
  function storeInputValue(input) {
    input.setAttribute('value', input.value);
    input.setAttribute('disabled', 'disabled');
  }
</script>

Überwachung mit JavaScript

Die letzte Methode besteht darin, JavaScript zu verwenden, um zu verhindern, dass der Wert des Eingabeelements geändert wird. Nach den Benutzereingaben können wir JavaScript verwenden, um den Eingabewert zu speichern und das Eingabeelement zu deaktivieren, sodass das Eingabeelement auch dann nicht geändert werden kann, wenn der Benutzer erneut klickt. 🎜rrreee🎜In diesem Fall ist das Eingabeelement sofort nach Eingabe des Werts nicht mehr verfügbar und der Benutzer kann seinen Wert nicht erneut ändern. Es ist jedoch zu beachten, dass dies keine perfekte Lösung ist. 🎜🎜Zusammenfassung🎜🎜Durch die obige Einführung können wir erkennen, dass es ungültig ist, CSS-Eigenschaften zu verwenden, um den Wert des Eingabeelements so zu steuern, dass er nicht bearbeitet werden kann. Allerdings können wir nicht bearbeitbare Effekte erzielen, indem wir einige Eigenschaften des Eingabesteuerelements selbst festlegen oder JavaScript zur Überwachung der Eingabe verwenden. Dies muss jedoch mit Vorsicht erfolgen, da Eingabeelemente von Beginn ihres Entwurfs an über äußerst wichtige Semantik und Funktionen verfügen und eine übermäßige Kontrolle über sie unerwartete negative Auswirkungen haben kann. 🎜

Das obige ist der detaillierte Inhalt vonWas bedeutet, dass die CSS-Eingabe nicht bearbeitet werden kann?. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!