l'entrée jquery n'est jamais modifiable

Cet article explique comment utiliser jQuery pour rendre la zone de saisie du formulaire non modifiable.

Dans de nombreuses applications, nous utilisons généralement l'élément input, qui est l'un des éléments HTML de base utilisés pour recevoir la saisie de texte. Dans certains cas, nous souhaitons définir certaines zones de saisie en mode lecture seule pour empêcher les utilisateurs de modifier dans les zones de saisie. Cela peut être dû au fait que le contenu du texte est généré par une base de données ou une API, ou est configuré pour empêcher toute utilisation abusive.

De manière générale, afin de définir la zone de saisie en lecture seule, nous devons opérer sur le backend pour contrôler la sortie des attributs HTML (tels que la lecture seule). Mais dans certains cas, nous pouvons ne pas avoir accès au code backend ou ne pas pouvoir modifier facilement les attributs HTML. Pour le moment, nous pouvons gérer cette situation en utilisant jQuery.

Voici quelques exemples montrant comment utiliser jQuery pour définir une zone de saisie en lecture seule :

Exemple 1 : Utilisation de la méthode .prop

La méthode .prop() dans jQuery est utilisée pour obtenir ou définir une propriété valeurs. Vous pouvez utiliser la méthode .prop() pour définir une zone de saisie en mode lecture seule. Le code ci-dessous montre comment utiliser la méthode .prop() pour y parvenir :

<!-- HTML -->
<input type="text" id="myInput" value="只读输入框">

<!-- JavaScript & jQuery -->
$(document).ready(function() {
    $('#myInput').prop('readonly', true);
});

De cette façon, la zone de saisie sera définie en mode lecture seule et l'utilisateur ne pourra pas modifier le texte qu'elle contient. Si nous devons modifier la valeur de la zone de saisie, il suffit d'utiliser la méthode .val() de jQuery.

Exemple 2 : Utilisation de la méthode .attr

L'exemple ci-dessus montre comment utiliser la méthode .prop() pour définir la zone de saisie en mode lecture seule. Mais dans certains cas, la méthode prop() peut ne pas fonctionner correctement. Par exemple, dans certaines versions de jQuery, prop ne peut contrôler que les éléments qui existent après le chargement du document et peut ne pas être efficace pour les éléments ultérieurs ajoutés via AJAX ou d'autres méthodes. À ce stade, nous pouvons utiliser la méthode .attr() au lieu de la méthode .prop(). Voici un exemple de code utilisant la méthode .attr() :

<!-- HTML -->
<input type="text" id="myInput" value="只读输入框">

<!-- JavaScript & jQuery -->
$(document).ready(function() {
    $('#myInput').attr('readonly', 'readonly');
});

Ce code définira également la zone de saisie en mode lecture seule. Nous pouvons utiliser la méthode removeAttre() pour supprimer l'attribut en lecture seule afin que la zone de saisie puisse être à nouveau modifiée.

Exemple 3 : Utilisation de CSS

Les méthodes des deux exemples ci-dessus consistent à modifier directement la valeur de l'attribut de l'élément. L'implémentation est simple mais peut détruire la pureté du HTML. Si nous voulons rendre la zone de saisie non modifiable sans modifier la valeur de l'attribut de l'élément, nous pouvons utiliser des styles CSS pour la contrôler. Plus précisément, vous pouvez définir des styles CSS pour les éléments d'entrée afin d'interdire les modifications par l'utilisateur. Voici un exemple de code utilisant CSS :

<!-- HTML -->
<input type="text" id="myInput" value="只读输入框">

<!-- CSS -->
input[readonly] {
  background-color: #eee;
  cursor: not-allowed;
}

<!-- JavaScript & jQuery -->
$(document).ready(function() {
    $('#myInput').attr('readonly', 'readonly');
});

Ce code ajoutera des styles à toutes les zones de saisie avec des attributs en lecture seule, leur donnant un fond gris et affichant un symbole interdit, empêchant les utilisateurs de les modifier. Cette méthode ne repose pas sur JavaScript et ne modifie pas les valeurs des attributs HTML. Lorsque nous devons réinitialiser la zone de saisie comme modifiable, il nous suffit de supprimer input[readonly] et les règles correspondantes en CSS.

Résumé du partage

Dans les applications, il est parfois nécessaire de définir la zone de saisie en mode lecture seule. Avec jQuery, cela peut être facilement réalisé, empêchant les utilisateurs de commettre des erreurs. Nous pouvons utiliser les méthodes .prop() et .attr() pour modifier les valeurs des attributs des éléments, ou nous pouvons utiliser des styles CSS pour empêcher la zone de saisie d'être modifiable. De plus, nous pouvons également utiliser d'autres méthodes pour atteindre le même objectif, comme définir l'attribut désactivé de l'élément d'entrée sur true ou utiliser divers plug-ins jQuery. L'exemple présenté dans cet article n'est qu'une des méthodes d'implémentation de jQuery, et les lecteurs peuvent choisir en fonction des besoins réels de l'application.

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!