web-dev-qa-db-fra.com

Restreindre à 2 décimales dans la frappe d'une zone de texte?

Je veux entrer un point décimal dans une zone de texte. Je veux restreindre l'utilisateur en entrant plus de 2 chiffres après le signe décimal. J'ai écrit le code pour y parvenir dans l'événement Keypress.

function validateFloatKeyPress(el, evt) {
    var charCode = (evt.which) ? evt.which : event.keyCode;

    if (charCode != 46 && charCode > 31 && (charCode < 48 || charCode > 57)) {
        return false;
    }

    if (charCode == 46 && el.value.indexOf(".") !== -1) {
        return false;
    }

    if (el.value.indexOf(".") !== -1)
    {
        var range = document.selection.createRange();

        if (range.text != ""){
        }
        else
        {
            var number = el.value.split('.');
            if (number.length == 2 && number[1].length > 1)
                return false;
        }
    }

    return true;
}
<asp:TextBox ID="txtTeamSizeCount" runat="server" onkeypress="return validateFloatKeyPress(this,event);" Width="100px" MaxLength="6"></asp:TextBox>

Le code fonctionne mais le problème est: si j'entre ".75" puis changez le en "1,75", ce n'est pas possible. La seule façon de le faire est de le supprimer complètement puis de taper "1,75". Ce problème se produit s'il y a déjà 2 chiffres après le signe décimal dans la zone de texte. Les conditions que j'impose sont

a) Après la présence de la décimale, il doit comporter au moins 1 ou 2 chiffres. Pour ex .75 ou .7 ou 10.75 ou 333.55 ou 333.2 est accepté. mais non .753 ou 12.3335


b) Avant la décimale, il n'est pas indispensable que l'utilisateur entre une valeur. L'utilisateur doit également pouvoir entrer des nombres entiers également.

Pouvez-vous me dire quel pourrait être le problème?

Merci,
Jollyguy 

javascriptvalidationkeypress
20
Jollyguy

Vous étiez presque là. Il suffit de vérifier qu’il n’ya pas plus de 2 caractères après la virgule.

UPDATE 1 - vérifiez la position carat pour permettre l’insertion de caractère avant la décimale.
UPDATE 2 - problème correct signalé par le commentaire de ddlab et n'autorisant qu'un point.

 function validateFloatKeyPress(el, evt) {
    var charCode = (evt.which) ? evt.which : event.keyCode;
    var number = el.value.split('.');
    if (charCode != 46 && charCode > 31 && (charCode < 48 || charCode > 57)) {
        return false;
    }
    //just one dot (thanks ddlab)
    if(number.length>1 && charCode == 46){
         return false;
    }
    //get the carat position
    var caratPos = getSelectionStart(el);
    var dotPos = el.value.indexOf(".");
    if( caratPos > dotPos && dotPos>-1 && (number[1].length > 1)){
        return false;
    }
    return true;
}

//thanks: http://javascript.nwbox.com/cursor_position/
function getSelectionStart(o) {
    if (o.createTextRange) {
        var r = document.selection.createRange().duplicate()
        r.moveEnd('character', o.value.length)
        if (r.text == '') return o.value.length
        return o.value.lastIndexOf(r.text)
    } else return o.selectionStart
}

http://jsfiddle.net/S9G8C/1/
http://jsfiddle.net/S9G8C/203/

27
Moob

Envisagez de tirer parti de l'API de validation des contraintes de HTML5. Je n'empêche pas nécessairement la saisie de valeurs non valides, mais le champ est marqué comme non valide et la soumission du <form> (par défaut) est interrompue. J'ai ajouté le <output> pour illustrer les raisons pour lesquelles le navigateur considère, par exemple, "1.100" une valeur valide (la valeur numérique est "1.1").

<input id="n" type="number" step=".01">


var
  n = document.getElementById('n'),
  o = document.getElementById('o'),
  didInputN = function(e) {
    o.value = n.valueAsNumber;
  };

n.addEventListener('input', didInputN);
input:invalid {
  color: white;
  background-color: red;
}
<input id="n" type="number" step=".01">
<output id="o" for="n"></output>

Philosophiquement, vous pouvez considérer cette approche comme plus utilisable, car elle permet à l'utilisateur de coller une entrée non valide et de la modifier directement dans le champ.

7
Nate Whittaker
 function decimalValidation(el, evt) {
       var charCode = (evt.which) ? evt.which : event.keyCode;
       var number = el.value.split('.');
         if(charCode == 8) {
          return true;
         }
        if (charCode != 46 && charCode > 31 && (charCode < 48 || charCode > 57)) {
            return false;
        }
        //just one dot
        if(number.length>1 && charCode == 46){
             return false;
        }
        //get the carat position
        var caratPos = getSelectionStart(el);
        var dotPos = el.value.indexOf(".");
        if( caratPos > dotPos && dotPos>-1 && (number[1].length > 1)){
            return false;
        }
        return true;
    }

function getSelectionStart(o) {
    return o.selectionStart
}

Bonjour @webvitaly Le code ci-dessus fonctionnera aussi dans IE également, veuillez cocher Et le retour arrière après les décimales ne fonctionnant pas dans Mozilla, j'ai mis à jour ma réponse.

2
vinay
1.)No multiple decimals points.
2.)Two numbers after decimal point.
3.)Allow only Numbers and one decimal point(.).

Cela aidera. jsFiddle

0
surendra babu

Mon problème était que j'en ai besoin pour afficher un message d'erreur en temps réel si l'utilisateur n'est autorisé qu'à 2 décimales:

value = parseFloat(valueFromInput);
parseFloat(value.toFixed(2)) !== value // condition to check

Le code ci-dessus a fonctionné pour moi ..toFixed convertit le float en chaîne avec seulement 2 décimales et je dois reconvertir en float pour vérifier avec la valeur initiale si sont identiques.

P.S. Et avant cette condition, vous devriez vérifier si la valeur est NaN.

0
Alin Ciocan

ce code est très complet, je change de "." à ",":

  • ne peut pas "," commence

  • ne peut pas écrire plus "," 

    <script type="text/javascript">

    function isNumberKey(evt, el) {
        var charCode = (evt.which) ? evt.which : event.keyCode;
        var number = el.value.split(',');
        var caracter = el.value;

        if (charCode != 44 && charCode > 31 && (charCode < 48 || charCode > 57)) {
            return false;
        }

        if (charCode == 44 && caracter == "") {
            return false;
        }

        if (charCode == 44 && caracter.indexOf(",") != -1) {
            return false;
        }

        //get the carat position
        var caratPos = getSelectionStart(el);
        var dotPos = el.value.indexOf(",");
        if (caratPos > dotPos && dotPos > -1 && (number[1].length > 1)) {
            return false;
        }
        return true;
    }

    function getSelectionStart(o) {
        if (o.createTextRange) {
            var r = document.selection.createRange().duplicate()
            r.moveEnd('character', o.value.length)
            if (r.text == '') return o.value.length
            return o.value.lastIndexOf(r.text)
        } else return o.selectionStart
    }

</script>
0
Eron Fontes