Limiter à 2 décimales dans keypress d'une zone de texte?

Je veux entrer un point décimal dans une zone de texte. Je veux restreindre l'utilisateur par la saisie de plus de 2 chiffres après la virgule. J'ai écrit le code pour la réalisation que 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 de travail, mais la question est: si j'entre ".75" et ensuite de le modifier pour "1.75", il n'est pas possible. Seule façon de le faire est de le supprimer complètement, puis tapez "1.75". Ce problème se produit si il y a déjà 2 chiffres après la virgule dans la zone de texte. Les conditions que je lui impose sont

a) Après la virgule est présente, elle doit au moins avoir 1 ou 2 chiffres. Pour les ex .75 ou .7 ou de 10,75 ou 333.55 ou 333.2 est acceptée. mais non .753 ou 12.3335

b) Avant la virgule, il ne doit pas être pour l'utilisateur de saisir une valeur. L'utilisateur doit également être en mesure d'entrer un nombre entier également.

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

Merci,

Jollyguy

InformationsquelleAutor Jollyguy | 2014-04-22

30

Vous avez été près de là. Il suffit de vérifier qu'il n'y a plus de 2 caractères après la virgule.

Mise à JOUR 1 - vérifier carat, pour permettre l'insertion de caractères avant la virgule.

Mise à JOUR 2 - corriger problème souligné par ddlab commentaire et un seul 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/
- désolé pour le retard, pris un jour de congé. votre code ne fonctionne pas bcos il ne permet pas de saisir toute la nsa avant la virgule quand il y a 2 chiffres après la virgule.
- J'ai mis à jour ma réponse en conséquence.
- merci, c'est de travailler..
- Vous êtes les bienvenus 😉
- Désolé, mais le jsfiddle exemple semble manquer une véritable validation de la saisie. Je peux entrer 8.8.8.8.999 sans aucun problème. Seulement, si j'entre un nombre correct de la valeur comme 888.99 qu'il fonctionne comme prévu. 🙁
- Doh! Merci pour cette remarque. J'ai mis à jour ma réponse pour corriger cela.
- comment appeler ou utiliser cette fonction? Je veux dire ce qui va être transmis à l' (el, evt)???
- comme vous pouvez le voir à partir de l'exemple de violon, la méthode est appelée par un onkeypress attribut dans l'élément d'entrée lui-même onkeypress="return validateFloatKeyPress(this,event);". Ce n'est pas comment, je vous recommande de le faire, mais ma réponse a été un correctif de code existant. Voici une mise à jour de violon
- Son agréable. Savez-vous quelque chose comme lorsque j'appuie sur 1, il changera automatiquement pour 01.00 quelque chose qui va toujours convertir nombre à 2 décimales.
- Je suis capable de taper plus de 2 caractères après le point décimal dans IE11 sur Win10. Essayer de trouver une solution...
- N'importe qui peut copier 2.22 et coller autant de fois qu'il/elle veut. Donc, ce code doit également prendre soin de cela.
InformationsquelleAutor Moob
9

Envisager tirant profit de HTML5 est Contrainte de Validation de l'API. Il n'est pas nécessairement empêcher de taper des valeurs non valides, mais le champ est marqué invalide et il s'arrête à la soumission de la <form> (par défaut). J'ai ajouté le <output> pour illustrer pourquoi le navigateur considère par exemple "1.100" une valeur valide (il voit la valeur numérique que "1.1").
```
<input id="n" type="number" step=".01">
```
JS:
```
var
  n = document.getElementById('n'),
  o = document.getElementById('o'),
  didInputN = function(e) {
    o.value = n.valueAsNumber;
  };

n.addEventListener('input', didInputN);
```
CSS:
```
input:invalid {
  color: white;
  background-color: red;
}
```
HTML:
```
<input id="n" type="number" step=".01">
<output id="o" for="n"></output>
```
Philosophiquement, vous pouvez considérer ceci comme un plus utilisable approche car elle permet à l'utilisateur de coller une entrée non valide et le modifier directement dans le champ.
- Nice. C'est beaucoup mieux que la fixation de l'OP script que j'ai fait. Bravo.
InformationsquelleAutor Nate Whittaker
7

Vous pouvez le faire par un autre moyen avec de l'événement onchange, à ne pas limiter à l'utilisateur de saisir, au lieu tout simplement de convertir le nombre après la saisie, à rendre uniforme, comme cela,

JS:
```
function validateFloatKeyPress(el) {
    var v = parseFloat(el.value);
    el.value = (isNaN(v)) ? '' : v.toFixed(2);
}
```
HTML:
```
<input id="aninput" type="text" onchange="validateFloatKeyPress(this);" />
```
45.846 devrait être 45.85 mais dans votre code utilisateur est nécessaire pour la conversion de leurs soi-même et ensuite, ils pourront type 45.85 directement

InformationsquelleAutor Niklesh Raut

 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
}

Salut @webvitaly Le code ci-dessus fonctionne dans IE aussi s'il vous plaît vérifier
Et retour arrière après décimales ne fonctionne pas sous Mozilla, j'ai mis à jour ma réponse.

est-il un moyen d'inclure tapant du point décimal avant de taper le numéro de je.type e .5 (qui valide à 0,5 OnBlur). Votre solution actuelle l'habitude de me permettre de taper du point décimal si je n'ai pas tapé une valeur encore.

InformationsquelleAutor vinay

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

Cela aidera.jsFiddle

InformationsquelleAutor surendra babu

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

ne peux pas "," à commencer

ne pouvez 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>

InformationsquelleAutor Eron Fontes

0

Mon problème est que j'ai besoin d'afficher un message d'erreur en temps réel si l'utilisateur est autorisé à seulement 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 flotteur à une chaîne de wit seulement 2 décimales et je dois convertir retour à flotteur afin de vérifier avec la valeur initiale si sont les mêmes.

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

InformationsquelleAutor Alin Ciocan

Vous devez vous connecter pour publier un commentaire.