JQuery autorise seulement deux nombres après le point décimal

La logique est chaque fois qu'un utilisateur saisit un numéro pour vérifier deux choses.

1. L'utilisateur a-t-il saisi un point décimal?
2. Les décimales sont-elles plus de 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 afin que les touches fléchées et les backspace fonctionnent dans Firefox (commentaire Manoj)

EDIT-2
De plus, vous devez ajouter $(this)[0].selectionStart >= text.length - 2 afin que vous puissiez 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 été supprimé . Et l'a placé ailleurs pour créer une valeur avec plus de 2 chiffres après la décimale. Donc, vous devez ajouter $this.val($this.val().substring(0, $this.val().indexOf('.') + 3)); Pour réduire les chiffres supplémentaires (commentaire Gilberto Sánchez)

EDIT-4
Pour gérer les données collées, vous devez lier un gestionnaire d'événements en pâte. Ensuite, vous devez vérifier si les données collées ont eu . Avec text.indexOf('.') > -1 et plus de 2 chiffres après la décimale avec text.substring(text.indexOf('.')).length > 3 . Si c'est le cas, vous devez réduire les chiffres supplémentaires. Vous devez également vérifier que l'utilisateur a saisi une 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" /> 

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

1. Cela permettra des nombres négatifs
2. Il vous permettra de modifier la gauche de la décimale quand il y a déjà deux chiffres à droite
3. Il vous permet d'utiliser les touches fléchées et les backspace 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" /> 

Je vous remercie! J'ai ajouté la possibilité de supprimer les chiffres et '.' Une fois dactylographié:

The event.keyCode !== 8 fait cette action pour l' arrière-espace .

The event.keyCode !== 46 fait cette action pour supprimer .

 $( 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(); } } }); }); 

J'ai mis à jour cette routine pour permettre des fonctions d'édition standard car celles-ci ont été empêchées dans le code ci-dessus. (Cette routine est juste pour le traitement d'un flotteur mais peut être adaptée pour autoriser seulement 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(); } 

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; } 

Démonstration de lien travaillé

On peut aussi le faire avec une expression régulière:

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

Nommez le sélecteur css. Classez ce que vous voulez et mettez-le sur l'entrée.