web-dev-qa-db-fra.com

JQuery n'autorise que deux nombres après le point décimal

J'ai trouvé la fonction JQuery suivante ici qui empêche un utilisateur d'entrer quoi que ce soit qui n'est pas un nombre ou une décimale simple. La fonction fonctionne bien, mais j’aimerais l’améliorer pour empêcher l’utilisateur de saisir 3 décimales ou plus, c’est-à-dire interdire 99,999 et autoriser 99,99. Des idées?

 function checkForInvalidCharacters(event, inputBox){                            
     if ((event.which != 46 || inputBox.val().indexOf('.') != -1) && (event.which < 48 || event.which > 57)) {          
                event.preventDefault();           
            }   
     };
javascriptjquerykeycode
26
user676567

La logique est que chaque fois qu'un utilisateur entre un numéro, vous devez vérifier deux choses.

  1. L'utilisateur a-t-il entré un point décimal?
  2. La décimale est-elle supérieure à deux?

Pour le premier, vous pouvez utiliser $(this).val().indexOf('.') != -1

Pour le second, vous pouvez utiliser $(this).val().substring($(this).val().indexOf('.'), $(this).val().indexOf('.').length).length > 2

EDIT-1
De plus, vous devez ajouter event.which != 0 && event.which != 8 pour que les touches fléchées et le retour arrière fonctionnent dans Firefox (commentaire Manoj)

EDIT-2
De même, vous devez ajouter $(this)[0].selectionStart >= text.length - 2 pour pouvoir ajouter des chiffres si le curseur se trouve à gauche du point décimal (commentaire BIdesi).

EDIT-3
De plus, vous devez vérifier si l'utilisateur a supprimé . et l'a placé ailleurs, créant ainsi une valeur avec plus de 2 chiffres après la virgule. Vous devez donc ajouter $this.val($this.val().substring(0, $this.val().indexOf('.') + 3)); pour couper des chiffres supplémentaires (commentaire de Gilberto Sánchez)

EDIT-4
Pour gérer les données collées, vous devez lier un gestionnaire d’événement coller. Ensuite, vous devez vérifier si les données collées ont . avectext.indexOf('.') > -1 et plus de 2 chiffres après la virgule avec text.substring(text.indexOf('.')).length > 3. Si c'est le cas, vous devez couper des chiffres supplémentaires. Vous devez également vérifier que l'utilisateur a saisi l'entrée numérique avec $.isNumeric() (commentaire darasd).

Voici le code:

$('.number').keypress(function(event) {
    var $this = $(this);
    if ((event.which != 46 || $this.val().indexOf('.') != -1) &&
       ((event.which < 48 || event.which > 57) &&
       (event.which != 0 && event.which != 8))) {
           event.preventDefault();
    }

    var text = $(this).val();
    if ((event.which == 46) && (text.indexOf('.') == -1)) {
        setTimeout(function() {
            if ($this.val().substring($this.val().indexOf('.')).length > 3) {
                $this.val($this.val().substring(0, $this.val().indexOf('.') + 3));
            }
        }, 1);
    }

    if ((text.indexOf('.') != -1) &&
        (text.substring(text.indexOf('.')).length > 2) &&
        (event.which != 0 && event.which != 8) &&
        ($(this)[0].selectionStart >= text.length - 2)) {
            event.preventDefault();
    }      
});

$('.number').bind("paste", function(e) {
var text = e.originalEvent.clipboardData.getData('Text');
if ($.isNumeric(text)) {
    if ((text.substring(text.indexOf('.')).length > 3) && (text.indexOf('.') > -1)) {
        e.preventDefault();
        $(this).val(text.substring(0, text.indexOf('.') + 3));
   }
}
else {
        e.preventDefault();
     }
});
.number {
  padding: 5px 10px;
  font-size: 16px;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<input type="text" class="number" />

42
laaposto

J'ai mis à jour la fonction pour quelques cas supplémentaires.

  1. Il permettra des nombres négatifs
  2. Cela vous permettra de modifier la gauche de la décimale quand il y a déjà 2 chiffres à droite
  3. Il vous permet d'utiliser les touches fléchées et le retour arrière lorsque vous êtes dans Firefox.
  4. Il gère également les données collées

/**
 * Given an input field, this function will only allow numbers with up to two decimal places to be input.
 * @param {object} element
 * @return {number}
 */
function forceNumber(element) {
  element
    .data("oldValue", '')
    .bind("paste", function(e) {
      var validNumber = /^[-]?\d+(\.\d{1,2})?$/;
      element.data('oldValue', element.val())
      setTimeout(function() {
        if (!validNumber.test(element.val()))
          element.val(element.data('oldValue'));
      }, 0);
    });
  element
    .keypress(function(event) {
      var text = $(this).val();
      if ((event.which != 46 || text.indexOf('.') != -1) && //if the keypress is not a . or there is already a decimal point
        ((event.which < 48 || event.which > 57) && //and you try to enter something that isn't a number
          (event.which != 45 || (element[0].selectionStart != 0 || text.indexOf('-') != -1)) && //and the keypress is not a -, or the cursor is not at the beginning, or there is already a -
          (event.which != 0 && event.which != 8))) { //and the keypress is not a backspace or arrow key (in FF)
        event.preventDefault(); //cancel the keypress
      }

      if ((text.indexOf('.') != -1) && (text.substring(text.indexOf('.')).length > 2) && //if there is a decimal point, and there are more than two digits after the decimal point
        ((element[0].selectionStart - element[0].selectionEnd) == 0) && //and no part of the input is selected
        (element[0].selectionStart >= element.val().length - 2) && //and the cursor is to the right of the decimal point
        (event.which != 45 || (element[0].selectionStart != 0 || text.indexOf('-') != -1)) && //and the keypress is not a -, or the cursor is not at the beginning, or there is already a -
        (event.which != 0 && event.which != 8)) { //and the keypress is not a backspace or arrow key (in FF)
        event.preventDefault(); //cancel the keypress
      }
    });
}

forceNumber($("#myInput"));
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<input type="text" id="myInput" />

3
Mike

Cela peut aussi être fait avec une expression régulière:

    $('.class').on('input', function () {
        this.value = this.value.match(/^\d+\.?\d{0,2}/);
    });

Nommez le sélecteur css .class comme vous voulez et mettez-le sur l'entrée.

3
Tegge

danke dir! Je suis mort Möglichkeit hinzugefügt, die Nummern und '.' Zu löschen. einmal getippt:

Der event.keyCode !== 8 führt diese Aktion for ausbackspace.

Der event.keyCode !== 46 führt diese Aktion for ausdelete.

$( document ).ready(function() {

    $('#Ds_Merchant_Amount').keypress(function(event) {
    if ((event.which != 46 || $(this).val().indexOf('.') != -1) && (event.which < 48 || event.which > 57) ) {
        if (event.keyCode !== 8 && event.keyCode !== 46 ){ //exception
            event.preventDefault();
        }
    }
    if(($(this).val().indexOf('.') != -1) && ($(this).val().substring($(this).val().indexOf('.'),$(this).val().indexOf('.').length).length>2 )){
        if (event.keyCode !== 8 && event.keyCode !== 46 ){ //exception
            event.preventDefault();
        }
    }
  });
});
2
gtamborero

Valeurs numériques Avec point décimal, validation jusqu'à 2 points décimaux . Dépendance jQuery .

HTML -

<span>Float</span>
<input type="text" name="numeric" class='allownumericwithdecimal'>
<div>Numeric values only allowed  (With Decimal Point) </div>

Code JQuery -

Méthode 1-

    $(".allownumericwithdecimal").on("keypress keyup blur", function (event) {
     var patt = new RegExp(/[0-9]*[.]{1}[0-9]{2}/i);
     var matchedString = $(this).val().match(patt);
     if (matchedString) {
         $(this).val(matchedString);
     }
     if ((event.which != 46 || $(this).val().indexOf('.') != -1) && (event.which < 48 || event.which > 57)) {
         event.preventDefault();
     }
 });

Méthode 2 - 

 $(".allownumericwithdecimal").on("keypress keyup blur", function (event) {
     var patt = new RegExp(/(?<=\.\d\d).+/i);
     $(this).val($(this).val().replace(patt, ''));

     if ((event.which != 46 || $(this).val().indexOf('.') != -1) && (event.which < 48 || event.which > 57)) {
         event.preventDefault();
     }
 });
0
Ravindra Vairagi

J'ai mis à jour cette routine pour autoriser les fonctionnalités d'édition standard, telles qu'elles ont été empêchées dans le code ci-dessus. (Cette routine est juste pour traiter un float mais peut être adaptée pour ne permettre que 2 chiffres après la décimale)

var value = $(this).val().toString();

// Allowed Keys
if (event.which === 8 || event.which === 46 // Character delete
    || event.which === 16 || event.which === 17 // Modifier Key
    || event.which === 37 || event.which === 39  // Arrow Keys
    || (event.key.toLowerCase() === "a" && event.ctrlKey) // Select All
    || (event.key.toLowerCase() === "c" && event.ctrlKey) // Copy
    || (event.key.toLowerCase() === "x" && event.ctrlKey) // Cut
    || (event.key.toLowerCase() === "v" && event.ctrlKey) // Paste
    || (event.which === 45 && event.ctrlKey) // Old school copy (CTRL + INSERT)
    || (event.which === 46 && event.shiftKey) // Old school cut (SHIFT + DELETE)
    || (event.which === 45 && event.shiftKey) // Old school paste (SHIFT + INSERT)
    || (event.which === 35) // END
    || (event.which === 36) // HOME
    || (event.which === 35 && event.shiftKey) // SHIFT + END
    || (event.which === 36 && event.shiftKey) // SHIFT + HOME
    )
{
    return;
}
else if (event.which === 190) // Process decimal point
{
    if (value == "" || value.indexOf(".") > -1)
    {
        event.preventDefault();
    }
}
else if (event.which < 48 || event.which > 57 || event.ctrlKey || event.shiftKey) // Reject anything else that isn't a number
{
    event.preventDefault();
}
0
Dreamwalker

Essaye ça

HTML

<input type="text" id="min_rent" name="min_rent" onkeypress="return isPrice(event,$('#min_rent').val())">

Jquery

function isPrice(evt,value) {
    var charCode = (evt.which) ? evt.which : event.keyCode;
    if((value.indexOf('.')!=-1) && (charCode != 45 && (charCode < 48 || charCode > 57)))
        return false;
    else if(charCode != 45 && (charCode != 46 || $(this).val().indexOf('.') != -1) && (charCode < 48 || charCode > 57))
        return false;
    return true;
}

Worked Link demo

0
Sakthi Karthik