Explication détaillée des différences entre lecture seule, désactivé, affichage et visible

Cet article présente principalement l'explication détaillée des différences entre lecture seule, désactivé, affichage et visible. Il existe plusieurs propriétés dans les paramètres de style CSS qui ont la même fonction mais des formes d'expression légèrement différentes. Aujourd'hui, lorsque j'ai modifié les propriétés de style de l'objet via js, j'ai trouvé que l'affichage et le visible semblent être les mêmes, mais en fait il y en a. quelques différences. Au fait, partagez ici également la différence entre lecture seule et désactivée que vous voyez.

La différence entre display et visible :

(1) La première chose à expliquer est que display:none et visible:hidden peuvent masquer un élément sur la page Web.

(2) Si vous utilisez directement display:none pour masquer un élément dans le code du fichier de style ou du fichier de page, après avoir chargé la page, utilisez le code js sans définir le style via js pour afficher l'élément Certains attributs. de l'élément ne sera pas correctement obtenu, comme offSetTop, offSetLeft, etc., et la valeur renvoyée sera 0. Ces valeurs ne peuvent être obtenues correctement qu'après avoir défini style.display dans js pour afficher l'élément.

(3) Les éléments masqués à l'aide de display:none ne seront pas récupérés par les sites de recherche tels que Baidu, ce qui affectera le référencement du site Web. Dans certains cas, left:-100000px peut être utilisé pour obtenir le même résultat. effet.

(4) Si le style display:none d'un élément est défini via un fichier de style ou , la définition de style.display="" avec js n'entraînera pas l'élément à être affiché. Vous pouvez utiliser des valeurs telles que block ou inline à la place. Les paramètres directement sur l'élément via style="display:none" n'auront pas ce problème.

(5) Définir l'élément à afficher : aucun ne réservera son espace physique à l'objet caché, c'est-à-dire que l'objet disparaîtra complètement sur la page, il ne pourra pas être vu ou touché. Définir l'élément sur visibilité:hidden rend uniquement l'objet invisible sur la page Web, mais l'espace occupé par l'objet sur la page Web ne change pas. En termes simples, il est invisible mais touchable.

La différence entre lecture seule et désactivé :

(1) Lecture seule et désactivé peuvent empêcher les utilisateurs de modifier le contenu des champs du formulaire.

(2) Lorsque les attributs désactivés et en lecture seule sont définis sur vrai, l'attribut du formulaire ne peut pas être modifié.

(3) Si la valeur désactivée d'un élément d'entrée est définie sur true, l'élément d'entrée du formulaire ne peut pas obtenir le focus et toutes les opérations de l'utilisateur (clics de souris et saisie au clavier, etc.) ne sont pas valides pour l'élément d'entrée. La lecture seule concerne uniquement les éléments de saisie tels que les zones de saisie de texte qui peuvent saisir du texte. Si la valeur est définie sur true, l'utilisateur ne peut tout simplement pas modifier le texte correspondant, mais peut toujours se concentrer.

(4) La lecture seule n'est valable que pour la saisie (texte/mot de passe) et la zone de texte, tandis que désactivé est valable pour tous les éléments du formulaire en HTML. Cependant, une fois l'élément de formulaire utilisé, désactivé, lorsque nous POSTONS le formulaire après la soumission. via GET ou GET, la valeur de cet élément ne sera pas soumise, mais la valeur de l'élément de formulaire défini en lecture seule sera toujours soumise. Les situations les plus couramment utilisées sont :

(1) Un code d'identification unique est pré-rempli dans un formulaire pour l'utilisateur, et l'utilisateur n'est pas autorisé à le modifier, mais la valeur doit être transmise lors de la soumission. . À ce stade, cela devrait être Son attribut est défini sur lecture seule.

(2) Il arrive souvent que lorsqu'un utilisateur soumet formellement un formulaire, il doit attendre la vérification des informations par l'administrateur. Cela ne permet pas à l'utilisateur de modifier les données du formulaire, mais. ne peut que le voir. En raison de l'élément désactivé, la plage est grande, donc désactivé doit être utilisé à ce moment-là, mais en même temps, il convient de noter que le bouton de soumission doit également être désactivé, sinon tant que l'utilisateur appuie sur. ce bouton, s'il n'y a pas de contrôle d'intégrité dans la page d'opération de la base de données, la valeur dans la base de données sera effacée. Si la lecture seule est utilisée au lieu d'être désactivée dans ce cas, cela est toujours possible s'il n'y a que des éléments de saisie (texte/mot de passe) et zone de texte dans le formulaire. S'il y a d'autres éléments, tels que select, l'utilisateur peut réécrire la valeur et appuyer sur. Appuyez sur la touche Entrée pour soumettre (Entrée est la touche de déclenchement de soumission par défaut).

(3) Nous utilisons souvent JavaScript pour désactiver le bouton de soumission après que l'utilisateur a appuyé sur le bouton de soumission. Cela peut empêcher l'utilisateur de cliquer à plusieurs reprises sur le bouton de soumission dans un environnement avec de mauvaises conditions de réseau, ce qui entraîne un stockage de données redondant. . base de données.

Le contenu ci-dessus est une explication détaillée des différences entre lecture seule, désactivé, affichage et visible. J'espère qu'il sera utile à tout le monde.

Recommandations associées :

Explication détaillée des différences subtiles entre lecture seule et désactivé

Une brève discussion sur les attributs d'entrée en lecture seule lecture seule et désactiver en HTML La différence

Explication détaillée de la différence entre les attributs d'affichage et de visibilité dans div

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!