Comment définir la zone de saisie pour qu'elle ne soit pas modifiable dans jQuery

PHPz
Libérer: 2023-04-10 10:09:02
original
1322 Les gens l'ont consulté

Les zones de saisie sont l'un des éléments essentiels des applications Web. Parfois, nous devons afficher des informations textuelles statiques sur la page, mais nous ne permettons pas aux utilisateurs de les modifier. Si la zone de saisie est modifiable, l'utilisateur peut facilement modifier le contenu du texte. Cet article explique comment utiliser jQuery pour définir la zone de saisie comme non modifiable.

  1. Utilisez l'attribut readonly

L'attribut readonly est un attribut standard HTML, qui peut définir la zone de saisie en lecture seule. L'utilisateur peut voir le texte dans la zone de saisie mais ne peut y apporter aucune modification. Ajoutez simplement l'attribut en lecture seule à l'étiquette de la zone de saisie :

Copier après la connexion

Dans jQuery, vous pouvez utiliser la méthode attr() pour définir la valeur de l'attribut de la zone de saisie. Par exemple :

// 将class为readOnly的输入框设置为只读状态 $(".readOnly").attr("readonly", "readonly");
Copier après la connexion
  1. Utilisez l'attribut désactivé

L'attribut désactivé est également un attribut standard HTML, qui peut définir la zone de saisie sur un état désactivé. Contrairement à l'attribut en lecture seule, l'attribut désactivé désactive la zone de saisie et l'utilisateur ne peut pas modifier le contenu de la zone de saisie en cliquant ou en saisissant le clavier. Ajoutez simplement l'attribut désactivé à la balise de la zone de saisie :

Copier après la connexion

Dans jQuery, vous pouvez utiliser la méthode prop() pour définir la valeur de l'attribut de la zone de saisie. Par exemple :

// 将id为disabledInput的输入框设置为不可用状态 $("#disabledInput").prop("disabled", true);
Copier après la connexion
  1. Utilisation de styles CSS

L'utilisation de styles CSS est également un moyen efficace de désactiver les zones de saisie. Nous pouvons obtenir un statut en lecture seule ou indisponible en définissant le style de la zone de saisie. Parmi eux, la définition de la couleur d'arrière-plan, de la bordure, du curseur, des événements de pointeur et d'autres attributs de style de la zone de saisie peut donner à la zone de saisie l'apparence d'un état en lecture seule.

/* 只读样式 */ .readOnly { background-color: #f5f5f5; border: none; cursor: default; pointer-events: none; } /* 不可用样式 */ .disabled { background-color: #f5f5f5; border: none; color: #ccc; }
Copier après la connexion

Ensuite, dans jQuery, vous pouvez utiliser la méthode addClass() et la méthode removeClass() pour changer le style en lecture seule ou indisponible de la zone de saisie :

// 将class为readOnly的输入框添加只读样式 $(".readOnly").addClass("readOnly"); // 将class为disabled的输入框添加不可用样式 $(".disabled").addClass("disabled");
Copier après la connexion

Avec la méthode ci-dessus, nous pouvons facilement désactiver la zone de saisie afin que l'utilisateur ne puisse pas modifier le contenu du texte. Dans le développement réel, nous pouvons choisir différentes méthodes pour obtenir l'état en lecture seule ou indisponible de la zone de saisie en fonction des besoins réels.

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!

source:php.cn
Déclaration de ce site Web
Le contenu de cet article est volontairement contribué par les internautes et les droits d'auteur appartiennent à l'auteur original. Ce site n'assume aucune responsabilité légale correspondante. Si vous trouvez un contenu suspecté de plagiat ou de contrefaçon, veuillez contacter admin@php.cn
Derniers téléchargements
Plus>
effets Web
Code source du site Web
Matériel du site Web
Modèle frontal
À propos de nous Clause de non-responsabilité Sitemap
Site Web PHP chinois:Formation PHP en ligne sur le bien-être public,Aidez les apprenants PHP à grandir rapidement!