Maison > Article > interface Web > 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
<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. disabled
ou readonly
de l'entrée. 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 ;
<input type="text" id="myInput" readonly>
<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!