Utilisez jQuery pour implémenter une zone de saisie qui permet uniquement de saisir des nombres et des points décimaux

Implémenter la zone de saisie jQuery pour limiter la saisie de nombres et de points décimaux

Dans le développement Web, nous rencontrons souvent le besoin de contrôler le contenu saisi par les utilisateurs dans la zone de saisie, comme limiter la saisie de nombres et de points décimaux . Cette restriction peut être réalisée via JavaScript et jQuery. Ce qui suit explique comment utiliser jQuery pour implémenter la fonction de limitation de la saisie de nombres et de points décimaux dans la zone de saisie.

1. Structure HTML

Tout d'abord, nous devons créer une zone de saisie en HTML, le code est le suivant :

<input type="text" id="inputNumber" placeholder="只能输入数字和小数点">

Ici, nous créons une zone de saisie avec l'identifiant "inputNumber" et définissons l'attribut d'espace réservé sur "Uniquement les nombres". et un point décimal" pour inviter l'utilisateur à saisir uniquement des nombres et des points décimaux.

2. jQuery implémente la fonction de restriction d'entrée

Ensuite, nous utilisons jQuery pour implémenter la fonction de restriction d'entrée. Le code est le suivant :

$(document).ready(function(){
  $('#inputNumber').keypress(function(event) {
    var charCode = (event.which) ? event.which : event.keyCode;
    if (charCode != 46 && charCode > 31 && (charCode < 48 || charCode > 57)) {
      event.preventDefault();
    } else {
      var input = $(this).val();
      if ((charCode == 46 && input.indexOf('.') !== -1) || (charCode == 46 && input === "")) {
        event.preventDefault();
      }
    }
  });
});

Dans le code ci-dessus, utilisez d'abord $(document).ready()函数来确保DOM加载完毕后再执行jQuery代码。然后通过keypress()函数来监听输入框的键盘按下事件。在事件处理函数中，通过event.which或event.keyCode pour obtenir le code ASCII de la clé, puis déterminez si l'entrée est un nombre ou un point décimal, et sinon, empêchez l'événement par défaut.

Il convient de noter que pour gérer la situation du point décimal, si la zone de saisie a déjà un point décimal, la saisie du point décimal à nouveau ou la saisie du point décimal au début de la zone de saisie doit être empêchée.

3. Test

Enfin, testons le code. Ouvrez la page HTML contenant le code ci-dessus dans le navigateur et essayez de saisir d'autres caractères dans la zone de saisie pour vous assurer que seuls des nombres et des points décimaux peuvent être saisis.

Grâce à cette opération, nous pouvons utiliser jQuery pour limiter la zone de saisie aux seuls nombres et points décimaux. Cela peut aider efficacement les utilisateurs à saisir les spécifications et à améliorer l’expérience utilisateur. J'espère que le contenu ci-dessus pourra vous aider à implémenter les fonctions correspondantes.

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!