Compréhension approfondie de la différence entre lecture seule et désactivé dans les formulaires

Cet article présente principalement la différence entre Lecture seule et Désactivé dans le formulaire. Il est très détaillé et complet. Les amis qui ont besoin de connaître les informations pertinentes devraient venir l'étudier attentivement.

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, y compris la sélection, la radio, la case à cocher, le bouton, etc.

Mais une fois l'élément de formulaire désactivé, lorsque nous soumettons le formulaire par POST ou GET, la valeur de cet élément ne sera pas transmise et la valeur en lecture seule sera transmise (dans ce cas, apparaît lorsque nous définissons l'élément textarea dans un formulaire désactivé ou en lecture seule, mais le bouton de soumission peut être utilisé).

Les situations généralement courantes sont :

Un code d'identification unique est pré-rempli pour l'utilisateur dans un formulaire, et l'utilisateur n'est pas autorisé à le modifier, mais la valeur doit être transmise lorsque soumission. Cette propriété doit être définie 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 dans le formulaire, mais peut uniquement les visualiser. la large gamme d'éléments désactivés, Par conséquent, désactivé doit être utilisé à ce moment, 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 y en a. pas de contrôle d'intégrité dans la page de fonctionnement de la base de données, les valeurs de la base de données seront effacées.

Si readonly est utilisé au lieu de désactivé dans ce cas, s'il n'y a que des éléments de saisie (texte/mot de passe) et textarea dans le formulaire, c'est toujours possible. S'il y a d'autres éléments, tels que select, le. L'utilisateur peut Après avoir réécrit la valeur, appuyer sur la touche Entrée pour soumettre (Entrée est la touche 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 l'utilisateur de cliquer à plusieurs reprises sur le bouton de soumission dans un environnement avec de mauvaises conditions de réseau, ce qui entraînerait un stockage redondant des données dans le fichier. 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 du code js. , ils Il y a une certaine différence entre eux.

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.) sont invalides pour l'élément d'entrée. Le fait est que lorsque cette entrée de formulaire ne sera pas soumise lorsque le formulaire est soumis.

Lecture seule concerne uniquement les éléments de saisie tels que les zones de saisie de texte dans lesquelles du texte peut être saisi. 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, la saisie. L'élément sera soumis en tant qu'élément sur le formulaire.

Définition de JQuery et suppression de l'attribut désactivé

//Deux méthodes pour définir l'attribut désactivé

$('#areaSelect').attr( "disabled",true);

$('#areaSelect').attr("disabled","disabled");

//Trois méthodes pour supprimer l'attribut désactivé

$('#areaSelect').attr("disabled",false);

$('#areaSelect').removeAttr("disabled");

$(' #areaSelect ').attr("disabled","");

Ce qui précède est l'intégralité du contenu de cet article, j'espère que vous l'aimerez tous.

【Tutoriels associés recommandés】

1. Tutoriel vidéo CSS
2 Manuel en ligne CSS
3. tutoriel bootstrap