Comment empêcher les utilisateurs de saisir du contenu dans la zone de saisie dans jquery

Dans le développement Web, il est parfois nécessaire de limiter le contenu saisi par l'utilisateur dans la zone de saisie. À l'heure actuelle, certaines méthodes jQuery doivent être utilisées pour faire fonctionner la zone de saisie. Cet article explique principalement comment utiliser jQuery pour empêcher les utilisateurs de saisir du contenu dans la zone de saisie.

1. La fonction par défaut de désactivation de la zone de saisie

Avant de désactiver la saisie dans la zone de saisie via jQuery, nous devons d'abord comprendre l'attribut de type de la balise d'entrée. La valeur de l'attribut de type de la balise d'entrée comprend principalement les éléments suivants :

1. texte : zone de texte
2. mot de passe : zone de mot de passe
3. radio : bouton radio
4. case à cocher : case à cocher
5. soumettre : bouton de soumission
6. réinitialisation : bouton de réinitialisation
7. fichier : téléchargement de fichier
8. caché : champ caché
9. date : sélection de la date Appareil
10. numéro : zone de saisie du numéro
11. e-mail : zone de saisie de l'e-mail
12. tel : zone de saisie du numéro de téléphone
13. recherche : zone de saisie de recherche

Voici le code qui utilise jQuery pour désactiver la fonction par défaut de la zone de saisie :

$(document).ready(function() {
  // 禁止文本框和密码框的默认功能
  $('input[type="text"],input[type="password"]').bind('keypress', function(event) {
    if (event.keyCode == 13) {
      event.preventDefault();
    }
  });
});

Dans le code ci-dessus, nous utilisons d'abord la méthode .ready() de jQuery pour attendre que la page soit chargée, puis lions l'événement .keypress pour empêcher la fonction de soumission de retour chariot par défaut de la zone de saisie. Parmi eux, event.keyCode représente le code de la touche du clavier enfoncée et 13 représente le keyCode de la touche Entrée.

2. Désactiver la saisie dans la zone de saisie

Parfois, nous devons interdire aux utilisateurs de saisir du texte dans la zone de saisie. Voici le code pour utiliser jQuery pour désactiver la saisie dans la zone de saisie :

$(document).ready(function() {
  // 禁止文本框和密码框输入
  $('input[type="text"],input[type="password"]').bind('input propertychange', function(event) {
    this.value = this.value.replace(/[^\u0000-\u00ff]/g, ''); // 只允许输入英文、数字和中文等ASCII字符
  });
});

Dans le code ci-dessus. , nous lions les événements .input et .propertychange pour surveiller les modifications de contenu dans la zone de saisie. Dans la fonction de traitement d'événements, nous avons appelé la méthode replace() de l'objet String pour filtrer les caractères non-ASCII via l'expression régulière /¹/g, obtenant ainsi l'effet d'interdire la saisie.

3. Désactiver les zones de saisie

Parfois, nous devons désactiver toutes les zones de saisie. Voici le code pour utiliser jQuery pour désactiver les zones de saisie :

$(document).ready(function() {
  // 禁用所有输入框
  $('input').attr('disabled', 'disabled');
});

Dans le code ci-dessus, nous utilisons jQuery pour sélectionner toutes les balises de saisie et. pass. La méthode attr() leur définit un attribut "disabled", désactivant ainsi toutes les zones de saisie.

4. Désactiver une seule zone de saisie

Parfois, nous n'avons besoin de désactiver qu'une seule zone de saisie. Voici le code pour utiliser jQuery pour désactiver une seule zone de saisie :

$(document).ready(function() {
  // 禁用文本框和密码框输入
  $('#input-id').attr('disabled', 'disabled');
});

Dans le code ci-dessus, nous l'obtenons via. le sélecteur "#" + id Zones de saisie spécifiées, et définissez-leur un attribut "désactivé" via la méthode .attr(), désactivant ainsi les zones de saisie spécifiées.

Résumé :

Cet article présente principalement certaines méthodes d'utilisation de jQuery pour désactiver la saisie dans la zone de saisie, notamment la désactivation de la fonction par défaut de la zone de saisie, la désactivation de la saisie dans la zone de saisie, la désactivation de toutes les zones de saisie et la désactivation d'une seule zone de saisie. J'espère que cela vous sera utile dans votre travail actuel de développement Web.

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!