JavaScript interdit la saisie

JavaScript No input

Avec le développement continu d'Internet, JavaScript est devenu un élément indispensable de la conception Web moderne. JavaScript peut améliorer l'interactivité des pages Web et permettre aux utilisateurs de saisir et d'utiliser plus facilement des données. Cependant, dans certains cas, nous devons implémenter certaines fonctions qui restreignent la saisie de l'utilisateur via JavaScript. Par exemple, interdisez aux utilisateurs de saisir des caractères spécifiques ou limitez le nombre de caractères que les utilisateurs peuvent saisir, etc. Cet article vous aidera à implémenter ces fonctions en expliquant quelques techniques JavaScript.

Interdire la saisie de caractères spécifiques

Si vous souhaitez interdire la saisie de certains caractères dans la zone de saisie utilisateur, vous pouvez utiliser des expressions régulières JavaScript pour y parvenir. Par exemple, si vous souhaitez que l'utilisateur saisisse uniquement des chiffres, vous pouvez utiliser le code suivant dans l'événement onkeypress de la zone de saisie utilisateur :

function checkNumber(event) {
  var charCode = event.keyCode;
  if (charCode < 48 || charCode > 57) {
    event.preventDefault();
  }
}

Dans ce code, on récupère d'abord l'ASCII des caractères entré par le code utilisateur, puis déterminez si le caractère est un nombre. S'il ne s'agit pas d'un nombre, la méthode event.preventDefault() est appelée pour empêcher l'événement de saisie de caractères par défaut.

De même, si vous souhaitez empêcher les utilisateurs de saisir d'autres caractères spécifiques, modifiez simplement les conditions de jugement. Par exemple, si vous souhaitez empêcher les utilisateurs de saisir des lettres et des signes de ponctuation, vous pouvez utiliser le code suivant :

function checkCharacter(event) {
  var charCode = event.keyCode;
  if ((charCode >= 65 && charCode <= 90) || (charCode >= 97 && charCode <= 122) || (charCode >= 33 && charCode <= 47) || (charCode >= 58 && charCode <= 64) || (charCode >= 91 && charCode <= 96) || (charCode >= 123 && charCode <= 126)) {
    event.preventDefault();
  }
}

Dans ce code, nous modifions la condition de jugement pour juger si les caractères sont des lettres ou des signes de ponctuation marques.

Aucun espace autorisé

Parfois, nous espérons que les utilisateurs ne pourront pas saisir d'espaces lors de la saisie de données. Ceci peut être réalisé en détectant si les caractères saisis par l'utilisateur sont des espaces. Par exemple, vous pouvez utiliser le code suivant dans l'événement onkeypress de la zone de saisie utilisateur :

function checkWhiteSpace(event) {
  var charCode = event.keyCode;
  if (charCode === 32) {
    event.preventDefault();
  }
}

Dans ce code, nous déterminons si les caractères saisis par l'utilisateur sont des espaces, et si oui, appelons l'événement .preventDefault() Méthode pour empêcher l'événement de saisie de caractères par défaut.

Interdire la saisie dépassant le nombre de caractères spécifié

Si vous souhaitez limiter le nombre de caractères que l'utilisateur saisit dans la zone de saisie, vous pouvez le faire en détectant le nombre de caractères dans la zone de saisie utilisateur. Par exemple, vous pouvez utiliser le code suivant dans l'événement oninput de la zone de saisie utilisateur :

function limitInput(event, maxLength) {
  var input = event.target.value;
  if (input.length > maxLength) {
    event.target.value = input.slice(0, maxLength);
  }
}

Dans ce code, nous obtenons d'abord la valeur dans la zone de saisie utilisateur et déterminons si le nombre de caractères dépasse le spécifié Le nombre maximum de caractères (maxLength). S'il dépasse, les premiers caractères maxLength sont interceptés et réécrits dans la zone de saisie.

Exemple complet

Ce qui suit est un exemple complet, qui montre comment utiliser JavaScript pour implémenter des fonctions telles que l'interdiction de la saisie de caractères spécifiques, l'interdiction de la saisie d'espaces et interdisant la saisie de plus d'un nombre spécifié de caractères :

<!DOCTYPE html>
<html>
<head>
  <meta charset="UTF-8">
  <title>JavaScript 禁止输入</title>
</head>
<body>
  <form>
    <label>只能输入数字：</label>
    <input type="text" onkeypress="checkNumber(event)">
    <br><br>
    <label>不能输入空格：</label>
    <input type="text" onkeypress="checkWhiteSpace(event)">
    <br><br>
    <label>最多只能输入 5 个字符：</label>
    <input type="text" oninput="limitInput(event, 5)">
  </form>

  <script>
    function checkNumber(event) {
      var charCode = event.keyCode;
      if (charCode < 48 || charCode > 57) {
        event.preventDefault();
      }
    }

    function checkWhiteSpace(event) {
      var charCode = event.keyCode;
      if (charCode === 32) {
        event.preventDefault();
      }
    }

    function limitInput(event, maxLength) {
      var input = event.target.value;
      if (input.length > maxLength) {
        event.target.value = input.slice(0, maxLength);
      }
    }
  </script>
</body>
</html>

Dans cet exemple, nous créons un formulaire avec trois zones de saisie, qui sont utilisées pour démontrer les fonctions d'interdiction de saisie de chiffres, interdisant la saisie d'espaces et interdiction de saisir plus d'un nombre spécifié de caractères. Chaque zone de saisie est liée à un gestionnaire d'événements JavaScript correspondant.

Conclusion

En utilisant JavaScript, nous pouvons facilement implémenter diverses fonctions qui limitent la saisie de l'utilisateur. Cela améliore non seulement la sécurité et la qualité des données du site Web, mais offre également aux utilisateurs une meilleure expérience interactive. Nous espérons que cet article vous aidera à mieux utiliser JavaScript pour mettre en œuvre votre conception 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!