Comment traiter un formulaire pour créer des zones de texte telles que la saisie en lecture seule et non modifiables

Méthode 1 : onfocus=this.blur()

<input type="text" name="input1" value="中国" onfocus=this.blur()>

Méthode 2 : lecture seule

<input type="text" name="input1" value="中国" readonly> 
<input type="text" name="input1" value="中国" readonly="true">

Méthode 3 : désactivée

<input type="text" name="input1" value="中国" disabled>

Lecture seule et Désactivé peuvent empêcher l'utilisateur de modifier le contenu du champ du formulaire. Mais il existe de légères différences entre eux, qui se résument comme suit :
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, mais après que l'élément du formulaire utilise désactivé, lorsque nous use Si le formulaire est soumis via POST ou GET, la valeur de cet élément ne sera pas transmise, mais la lecture seule transmettra la valeur (la lecture seule accepte les modifications de valeur et peut les renvoyer, la désactivation accepte les modifications mais ne renvoie pas de données).
Les situations généralement courantes sont :
Un code d'identification unique est pré-rempli dans un formulaire pour l'utilisateur, et l'utilisateur n'est pas autorisé à le modifier. Cependant, la valeur doit être transmise lors de la soumission. , ses attributs doivent être définis en lecture seule.
Il arrive souvent que lorsqu'un utilisateur soumet officiellement un formulaire et doit attendre la vérification des informations par l'administrateur, l'utilisateur n'est pas autorisé à modifier les données du formulaire, mais peut uniquement les visualiser en raison de la large plage. des éléments désactivés, donc à ce moment-là, Disabled doit être utilisé, 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 base de données page d'opération, les valeurs de la base de données seront effacées. 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 le bouton de déclenchement de soumission par défaut)
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 les utilisateurs de cliquer à plusieurs reprises dans un environnement avec de mauvaises conditions de réseau. Les boutons de soumission entraînent le stockage redondant des données dans la base de données.
Les deux attributs désactivés et en lecture seule ont quelque chose en commun. Par exemple, si les deux sont définis sur true, l'attribut form ne peut pas être modifié. Il est souvent facile de mélanger ces deux attributs lors de l'écriture de code js. une différence entre eux. Il y a une certaine différence :
Si la désactivation d'un élément de saisie est définie sur true, l'élément de saisie du formulaire ne peut pas obtenir le focus et toutes les opérations de l'utilisateur (clics de souris et saisie au clavier, etc.) sont invalides. pour l'élément de saisie. Le point le plus important est que lorsque le formulaire est soumis, la saisie du formulaire ne sera pas soumise.
Lecture seule concerne uniquement les éléments de saisie tels que les zones de saisie de texte qui peuvent saisir du texte. S'il est défini sur true, l'utilisateur ne peut tout simplement pas modifier le texte correspondant, mais peut toujours se concentrer, et lors de la soumission du formulaire, l'élément de saisie sera utilisé. comme une soumission du formulaire.

Quelques problèmes de performances :
La différence entre display: none et visible:hidden est que visible:hidden conservera l'espace de l'élément
repaint (repaint ), repeindre Lorsqu'un changement se produit, l'apparence de l'élément est modifiée et cela se produit sans modifier la disposition. Par exemple, la modification du contour, de la visibilité et de la couleur d'arrière-plan n'affectera pas le rendu de la structure DOM.
reflow (rendu), la différence avec repaint est que cela affectera le rendu de la structure dom, et en même temps cela déclenchera le repaint, il se changera ainsi que tous les éléments parents (ancêtres), cette surcharge est très cher, ce qui entraîne des performances Le déclin est inévitable, et plus il y a d'éléments de page, plus l'effet sera évident.
Donc display:none générera une redistribution
visibility:hidden déclenchera uniquement le repaint

Articles connexes :

js définit la zone de texte de saisie en lecture seule

Définissez tous les objets du formulaire en lecture seule via js

Utilisez js pour contrôler dynamiquement l'attribut en lecture seule de la zone de saisie

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!