Que signifie une entrée CSS non modifiable ?

Dans le processus de développement front-end, l'élément d'entrée est l'un des contrôles de formulaire les plus couramment utilisés. Dans certains cas particuliers, nous devons empêcher les utilisateurs de modifier l'élément d'entrée. À ce stade, nous pensons généralement à définir l'attribut CSS de l'élément d'entrée pour répondre à cette exigence, mais en fait, ce n'est pas une solution réalisable.

En CSS, il existe en effet certains attributs associés qui peuvent être utilisés pour contrôler le comportement et le style des éléments d'entrée, tels que les attributs disabled et readonly. Mais ces attributs ne modifient pas essentiellement les attributs CSS de l'élément d'entrée, mais modifient les méthodes d'interaction autorisées pour obtenir l'effet d'interdiction ou de lecture seule. 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

Nous essayons souvent d'utiliser les propriétés CSS pour répondre à l'exigence selon laquelle l'entrée ne peut pas être modifiée, comme :

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

Un tel code CSS semble très simple, mais il est en fait inefficace car les styles CSS ne peuvent pas contrôler directement la valeur dans l'élément d'entrée. . Quelle que soit la façon dont vous le configurez, il peut être modifié en JavaScript à l'aide de l'attribut value de l'élément d'entrée.

1. Alors, pourquoi le style et la valeur de l'élément d'entrée ne peuvent-ils pas être modifiés directement en CSS ? Ceci est lié aux caractéristiques et à l’objectif de l’élément d’entrée.
2. Tout d'abord, la valeur de l'élément d'entrée doit être saisie indépendamment par l'utilisateur ou obtenue à partir d'autres sources, et les programmeurs ne doivent pas la modifier de force en raison de leurs propres besoins. Par conséquent, vous pouvez uniquement vous assurer que sa valeur n'est pas modifiée en définissant l'attribut disabled ou readonly de l'entrée.
3. Dans le même temps, l'élément d'entrée a reçu une sémantique unique dès le début de la conception. Dans une page Web, l'entrée est un contrôle utilisé pour obtenir les données d'entrée de l'utilisateur. Les données d'entrée seront envoyées au serveur d'arrière-plan pour traitement. Si le programmeur peut contrôler directement le style et la valeur de l'entrée, certains risques imprévisibles peuvent survenir, tels que :

Des programmes malveillants peuvent utiliser JavaScript ou des extensions de navigateur pour altérer la valeur de l'entrée, soumettant ainsi des soumissions inappropriées dans le nom de l'utilisateur. Données ;

Les attaquants de sites Web malveillants peuvent utiliser des attaques CSS pour masquer les données d'entrée et frauder les informations de l'utilisateur ;
1. Difficulté de maintenance : lorsque les styles et les valeurs sont soumis à des restrictions de modification en même temps, cela deviendra très difficile de maintenir ces éléments d’entrée.

Par conséquent, nous ne pouvons fondamentalement pas modifier directement la valeur de l'élément d'entrée. Cependant, dans certains cas nécessaires, nous pouvons toujours atteindre l'état de saisie non modifiable via le code. Voici plusieurs méthodes d'implémentation courantes :

2. Utilisez l'attribut désactivé

L'attribut désactivé est possédé par le contrôle d'entrée lui-même. Le définir rendra l'élément d'entrée gris et ne pourra pas être modifié. En effet, les contrôles indisponibles ne répondent à aucun événement d'interaction, y compris les clics et les saisies au clavier. Il s’agit d’une méthode très sûre et facile à mettre en œuvre.

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

3. Utilisez l'attribut en lecture seule

L'attribut en lecture seule est un autre attribut possédé par le contrôle d'entrée lui-même. Par rapport à désactivé, la lecture seule rend l'élément d'entrée en lecture seule et ne change pas son apparence. Cela signifie que vous pouvez toujours utiliser CSS pour modifier le style de l'élément d'entrée, mais vous ne pouvez pas modifier sa valeur. Cependant, cette propriété n'affecte que l'utilisateur et la valeur peut toujours être modifiée à l'aide de JavaScript ou du code backend.

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

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

Surveillance à l'aide de JavaScript

La dernière méthode consiste à utiliser JavaScript pour empêcher la modification de la valeur de l'élément d'entrée. Après les saisies de l'utilisateur, nous pouvons utiliser JavaScript pour stocker la valeur d'entrée et désactiver l'élément d'entrée afin que même si l'utilisateur clique à nouveau, l'élément d'entrée ne puisse pas être modifié. 🎜rrreee🎜Dans ce cas, l'élément d'entrée devient indisponible immédiatement après la saisie de la valeur et l'utilisateur ne peut plus modifier sa valeur. Il convient toutefois de noter que cette solution n’est pas parfaite. 🎜🎜Résumé🎜🎜Grâce à l'introduction ci-dessus, nous pouvons savoir qu'il n'est pas valide d'utiliser des propriétés CSS pour contrôler que la valeur de l'élément d'entrée n'est pas modifiable. Bien que nous puissions obtenir des effets non modifiables en définissant certaines propriétés du contrôle d'entrée lui-même ou en utilisant JavaScript pour surveiller l'entrée. Mais cela doit être fait avec prudence, car les éléments d'entrée ont une sémantique et des fonctions extrêmement importantes dès le début de leur conception, et un contrôle excessif de ceux-ci peut avoir des effets négatifs inattendus. 🎜

Ce qui précède est le contenu détaillé de. pour plus d'informations, suivez d'autres articles connexes sur le site Web de PHP en chinois!