Quelle est la meilleure façon de restreindre la saisie "numérique" uniquement pour les zones de texte?

Je cherche quelque chose qui permette des décimales.

Je vois beaucoup d'exemples. Mais je n'ai pas encore décidé lequel utiliser.

Mise à jour de Praveen Jeganathan

Plus de plugins, jQuery a implémenté le sien jQuery.isNumeric()ajouté dans la v1.7. Voir: https://stackoverflow.com/a/20186188/66767

Mettre à jour

Il existe une solution nouvelle et très simple pour cela:

Il vous permet d'utiliser tout type de filtre d'entrée sur un texte <input>, y compris divers filtres numériques. Cela gérera correctement Copier + Coller, Glisser + Déposer, les raccourcis clavier, les opérations du menu contextuel, les touches non typables et toutes les dispositions de clavier.

Consultez cette réponse ou essayez-la vous-même sur JSFiddle .

plugin jquery.numeric

J'ai réussi à implémenter de nombreux formulaires avec le plugin jquery.numeric .

$(document).ready(function(){
    $(".numeric").numeric();
});

De plus, cela fonctionne également avec les zones de texte!

Cependant, notez que Ctrl + A, Copier + Coller (via le menu contextuel) et Glisser + Déposer ne fonctionneront pas comme prévu.

HTML 5

Avec une prise en charge plus large de la norme HTML 5, nous pouvons utiliser l' patternattribut et le numbertype pour les inputéléments pour restreindre la saisie uniquement numérique. Dans certains navigateurs (notamment Google Chrome), cela fonctionne également pour restreindre le collage de contenu non numérique. Plus d'informations sur numberet d'autres types d'entrée plus récents sont disponibles ici .

Si vous souhaitez restreindre l'entrée (par opposition à la validation), vous pouvez travailler avec les événements clés. quelque chose comme ça:

<input type="text" class="numbersOnly" value="" />

Et:

jQuery('.numbersOnly').keyup(function () { 
    this.value = this.value.replace(/[^0-9\.]/g,'');
});

Cela permet immédiatement à l'utilisateur de savoir qu'il ne peut pas saisir de caractères alpha, etc. plutôt que plus tard pendant la phase de validation.

Vous voudrez toujours valider car l'entrée peut être remplie en coupant et collant avec la souris ou éventuellement par un autocompléteur de formulaire qui peut ne pas déclencher les événements clés.

Je pensais que la meilleure réponse était celle ci-dessus pour le faire.

jQuery('.numbersOnly').keyup(function () {  
    this.value = this.value.replace(/[^0-9\.]/g,''); 
});

mais je conviens que c'est un peu pénible que les touches fléchées et le bouton supprimer accrochent le curseur à la fin de la chaîne (et à cause de cela, il m'a été renvoyé lors des tests)

J'ai ajouté dans un simple changement

$('.numbersOnly').keyup(function () {
    if (this.value != this.value.replace(/[^0-9\.]/g, '')) {
       this.value = this.value.replace(/[^0-9\.]/g, '');
    }
});

de cette façon, s'il y a un bouton qui ne provoquera pas la modification du texte, ignorez-le. Avec cela, vous pouvez appuyer sur des flèches et supprimer sans sauter à la fin, mais cela efface tout texte non numérique.

Le plugin jquery.numeric a quelques bugs dont j'ai notifié l'auteur. Il permet plusieurs décimales dans Safari et Opera, et vous ne pouvez pas taper de retour arrière, les touches fléchées ou plusieurs autres caractères de contrôle dans Opera. J'avais besoin d'une entrée entière positive, donc j'ai fini par écrire la mienne à la fin.

$(".numeric").keypress(function(event) {
  // Backspace, tab, enter, end, home, left, right
  // We don't support the del key in Opera because del == . == 46.
  var controlKeys = [8, 9, 13, 35, 36, 37, 39];
  // IE doesn't support indexOf
  var isControlKey = controlKeys.join(",").match(new RegExp(event.which));
  // Some browsers just don't raise events for control keys. Easy.
  // e.g. Safari backspace.
  if (!event.which || // Control keys in most browsers. e.g. Firefox tab is 0
      (49 <= event.which && event.which <= 57) || // Always 1 through 9
      (48 == event.which && $(this).attr("value")) || // No 0 first digit
      isControlKey) { // Opera assigns values for control keys.
    return;
  } else {
    event.preventDefault();
  }
});

Plus de plugins, jQuery a implémenté son propre jQuery.isNumeric () ajouté dans la v1.7.

jQuery.isNumeric( value )

Détermine si son argument est un nombre.

Résultats des échantillons

$.isNumeric( "-10" );     // true
$.isNumeric( 16 );        // true
$.isNumeric( 0xFF );      // true
$.isNumeric( "0xFF" );    // true
$.isNumeric( "8e5" );     // true (exponential notation string)
$.isNumeric( 3.1415 );    // true
$.isNumeric( +10 );       // true
$.isNumeric( 0144 );      // true (octal integer literal)
$.isNumeric( "" );        // false
$.isNumeric({});          // false (empty object)
$.isNumeric( NaN );       // false
$.isNumeric( null );      // false
$.isNumeric( true );      // false
$.isNumeric( Infinity );  // false
$.isNumeric( undefined ); // false

Voici un exemple de la façon de lier isNumeric () avec l'écouteur d'événement

$(document).on('keyup', '.numeric-only', function(event) {
   var v = this.value;
   if($.isNumeric(v) === false) {
        //chop off the last char entered
        this.value = this.value.slice(0,-1);
   }
});

Le plugin numeric () mentionné ci-dessus, ne fonctionne pas dans Opera (vous ne pouvez pas revenir en arrière, supprimer ou même utiliser les touches Précédent ou Suivant).

Le code ci-dessous dans JQuery ou Javascript fonctionnera parfaitement (et ce n'est que deux lignes).

JQuery:

$(document).ready(function() {
    $('.key-numeric').keypress(function(e) {
            var verified = (e.which == 8 || e.which == undefined || e.which == 0) ? null : String.fromCharCode(e.which).match(/[^0-9]/);
            if (verified) {e.preventDefault();}
    });
});

Javascript:

function isNumeric(e)
{
    var keynum = (!window.event) ? e.which : e.keyCode;
    return !((keynum == 8 || keynum == undefined || e.which == 0) ? null : String.fromCharCode(keynum).match(/[^0-9]/));
}

Bien sûr, cela concerne uniquement la saisie numérique (plus les touches de retour arrière, de suppression, d'avance / retour) mais peut facilement être modifié pour inclure des points et des caractères moins.

Vous pouvez utiliser le plugin Validation avec sa méthode number () .

$("#myform").validate({
  rules: {
    field: {
      required: true,
      number: true
    }
  }
});

Pas besoin du code long pour la restriction de la saisie numérique, essayez ce code.

Il accepte également les valeurs int et float valides.

Approche Javascript

onload =function(){ 
  var ele = document.querySelectorAll('.number-only')[0];
  ele.onkeypress = function(e) {
     if(isNaN(this.value+""+String.fromCharCode(e.charCode)))
        return false;
  }
  ele.onpaste = function(e){
     e.preventDefault();
  }
}

<p> Input box that accepts only valid int and float values.</p>
<input class="number-only" type=text />

Approche jQuery

$(function(){

  $('.number-only').keypress(function(e) {
	if(isNaN(this.value+""+String.fromCharCode(e.charCode))) return false;
  })
  .on("cut copy paste",function(e){
	e.preventDefault();
  });

});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<p> Input box that accepts only valid int and float values.</p>
<input class="number-only" type=text />

METTRE À JOUR

Les réponses ci-dessus sont pour le cas d'utilisation le plus courant - valider l'entrée en tant que nombre.

Mais ci-dessous, l'extrait de code pour les cas d'utilisation spéciaux

• Autoriser les nombres négatifs
• Affichage de la frappe invalide avant de la supprimer.

$(function(){
      
  $('.number-only').keyup(function(e) {
        if(this.value!='-')
          while(isNaN(this.value))
            this.value = this.value.split('').reverse().join('').replace(/[\D]/i,'')
                                   .split('').reverse().join('');
    })
    .on("cut copy paste",function(e){
    	e.preventDefault();
    });

});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<p> Input box that accepts only valid int and float values.</p>
<input class="number-only" type=text />

Voici ce que j'utilise pour bloquer littéralement les frappes. Cela n'autorise que les chiffres 0-9 et un point décimal. Facile à implémenter, pas beaucoup de code, et fonctionne comme un charme:

<script>
function isNumberKey(evt) {
    var charCode = (evt.which) ? evt.which : event.keyCode;
    if (charCode != 46 && charCode > 31 && (charCode < 48 || charCode > 57)) {
        return false;
    } else {
        return true;
    }      
}
</script>

<input value="" onkeypress="return isNumberKey(event)">

Pour améliorer légèrement cette suggestion , vous pouvez utiliser le plug-in de validation avec ses méthodes number () , digits et range . Par exemple, ce qui suit garantit que vous obtenez un entier positif compris entre 0 et 50:

$("#myform").validate({
  rules: {
    field: {
      required: true,
      number: true,
      digits: true,
      range : [0, 50]
    }
  }
});

Vous ne voyez pas l'apparence magique et la disparition des alphabets sur la touche enfoncée. Cela fonctionne aussi sur la pâte de souris.

$('#txtInt').bind('input propertychange', function () {
    $(this).val($(this).val().replace(/[^0-9]/g, ''));
});

J'ai d'abord essayé de résoudre ce problème à l'aide de jQuery, mais je n'étais pas content que des caractères indésirables (non numériques) apparaissent réellement dans le champ de saisie juste avant d'être supprimés lors de la saisie.

En cherchant d'autres solutions, j'ai trouvé ceci:

Entiers (non négatifs)

<script>
  function numbersOnly(oToCheckField, oKeyEvent) {
    return oKeyEvent.charCode === 0 ||
        /\d/.test(String.fromCharCode(oKeyEvent.charCode));
  }
</script>

<form name="myForm">
<p>Enter numbers only: <input type="text" name="myInput" 
    onkeypress="return numbersOnly(this, event);" 
    onpaste="return false;" /></p>
</form>

Source: https://developer.mozilla.org/en-US/docs/Web/API/GlobalEventHandlers.onkeypress#Example Exemple en direct: http://jsfiddle.net/u8sZq/

Décimales (non négatives)

Pour autoriser un seul point décimal, vous pouvez faire quelque chose comme ceci:

<script>
  function numbersOnly(oToCheckField, oKeyEvent) {        
    var s = String.fromCharCode(oKeyEvent.charCode);
    var containsDecimalPoint = /\./.test(oToCheckField.value);
    return oKeyEvent.charCode === 0 || /\d/.test(s) || 
        /\./.test(s) && !containsDecimalPoint;
  }
</script>

Source: Je viens d'écrire ceci. Semble fonctionner. Exemple en direct: http://jsfiddle.net/tjBsF/

Autres personnalisations

• Pour autoriser la saisie de plus de symboles, ajoutez-les simplement à l'expression régulière qui agit comme filtre de code char de base.
• Pour implémenter des restrictions contextuelles simples, regardez le contenu actuel (état) du champ de saisie (oToCheckField.value)

Certaines choses pourraient vous intéresser:

• Un seul point décimal autorisé
• Autoriser le signe moins uniquement s'il est positionné au début de la chaîne. Cela permettrait des nombres négatifs.

Lacunes

• La position du curseur n'est pas disponible dans la fonction. Cela a considérablement réduit les restrictions contextuelles que vous pouvez implémenter (par exemple, pas deux symboles égaux consécutifs). Je ne sais pas quelle est la meilleure façon d'y accéder.

Je sais que le titre demande des solutions jQuery, mais j'espère que quelqu'un trouvera cela utile de toute façon.

Merci pour le post Dave Aaron Smith

J'ai modifié votre réponse pour accepter le point décimal et les nombres de la section des nombres. Ce travail est parfait pour moi.

$(".numeric").keypress(function(event) {
  // Backspace, tab, enter, end, home, left, right,decimal(.)in number part, decimal(.) in alphabet
  // We don't support the del key in Opera because del == . == 46.
  var controlKeys = [8, 9, 13, 35, 36, 37, 39,110,190];
  // IE doesn't support indexOf
  var isControlKey = controlKeys.join(",").match(new RegExp(event.which));
  // Some browsers just don't raise events for control keys. Easy.
  // e.g. Safari backspace.
  if (!event.which || // Control keys in most browsers. e.g. Firefox tab is 0
      (49 <= event.which && event.which <= 57) || // Always 1 through 9
      (96 <= event.which && event.which <= 106) || // Always 1 through 9 from number section 
      (48 == event.which && $(this).attr("value")) || // No 0 first digit
      (96 == event.which && $(this).attr("value")) || // No 0 first digit from number section
      isControlKey) { // Opera assigns values for control keys.
    return;
  } else {
    event.preventDefault();
  }
});

   window.jQuery.fn.ForceNumericOnly =
       function () {

           return this.each(function () {
               $(this).keydown(function (event) {
                   // Allow: backspace, delete, tab, escape, and enter
                   if (event.keyCode == 46 || event.keyCode == 8 || event.keyCode == 9 || event.keyCode == 27 || event.keyCode == 13 ||
                       // Allow: Ctrl+A
                       (event.keyCode == 65 && event.ctrlKey === true) ||
                       // Allow: home, end, left, right
                       (event.keyCode >= 35 && event.keyCode <= 39)) {
                       // let it happen, don't do anything
                       return;
                   } else {
                       // Ensure that it is a number and stop the keypress
                       if (event.shiftKey || (event.keyCode < 48 || event.keyCode > 57) && (event.keyCode < 96 || event.keyCode > 105)) {
                           event.preventDefault();
                       }
                   }
               });
           });
       };

Et appliquez ceci sur toutes les entrées que vous souhaitez:

$('selector').ForceNumericOnly();

HTML5 prend en charge le numéro de type d'entrée avec une prise en charge globale du navigateur de 88% + selon CanIUse en octobre 2015.

<input type="number" step="0.01" min="0" name="askedPrice" id="askedPrice" />

Ce n'est pas une solution liée à JQuery, mais l'avantage est que sur les téléphones mobiles, le clavier Android sera optimisé pour la saisie de nombres.

Alternativement, il est possible d'utiliser du texte de type d'entrée avec le nouveau paramètre "pattern". Plus de détails dans les spécifications HTML5.

Je pense que c'est mieux que la solution jquery, car dans cette question, la solution jquery fournie ne prend pas en charge le séparateur de milliers. Si vous pouvez utiliser html5.

JSFiddle: https://jsfiddle.net/p1ue8qxj/

Cette fonction fait la même chose, utilise certaines des idées ci-dessus.

$field.keyup(function(){
    var val = $j(this).val();
    if(isNaN(val)){
         val = val.replace(/[^0-9\.]/g,'');
         if(val.split('.').length>2) val =val.replace(/\.+$/,"");
    }
    $j(this).val(val); 
});

• afficher des commentaires visuels (une lettre incorrecte apparaît avant de disparaître)
• permet les décimales
• attrape plusieurs "."
• n'a aucun problème avec gauche / droite del etc.

/ * ceci est ma version multi-navigateur de Comment autoriser uniquement le numérique (0-9) dans la zone de saisie HTML à l'aide de jQuery?
* /

$("#inputPrice").keydown(function(e){
    var keyPressed;
    if (!e) var e = window.event;
    if (e.keyCode) keyPressed = e.keyCode;
    else if (e.which) keyPressed = e.which;
    var hasDecimalPoint = (($(this).val().split('.').length-1)>0);
    if ( keyPressed == 46 || keyPressed == 8 ||((keyPressed == 190||keyPressed == 110)&&(!hasDecimalPoint && !e.shiftKey)) || keyPressed == 9 || keyPressed == 27 || keyPressed == 13 ||
             // Allow: Ctrl+A
            (keyPressed == 65 && e.ctrlKey === true) ||
             // Allow: home, end, left, right
            (keyPressed >= 35 && keyPressed <= 39)) {
                 // let it happen, don't do anything
                 return;
        }
        else {
            // Ensure that it is a number and stop the keypress
            if (e.shiftKey || (keyPressed < 48 || keyPressed > 57) && (keyPressed < 96 || keyPressed > 105 )) {
                e.preventDefault();
            }
        }

  });

Exécutez simplement le contenu via parseFloat (). Il reviendra NaNsur une entrée non valide.

Vous pouvez utiliser autoNumeric depuis decorplanit.com . Ils ont un bon support pour le numérique, ainsi que la devise, l'arrondi, etc.

J'ai utilisé dans un environnement IE6, avec quelques réglages CSS, et ce fut un succès raisonnable.

Par exemple, une classe css numericInputpourrait être définie et elle pourrait être utilisée pour décorer vos champs avec les masques de saisie numériques.

adapté du site autoNumeric:

$('input.numericInput').autoNumeric({aSep: '.', aDec: ','}); // very flexible!

Je pense que c'est une bonne façon de résoudre ce problème et c'est extrêmement simple:

$(function() {
    var pastValue, pastSelectionStart, pastSelectionEnd;

    $("input").on("keydown", function() {
        pastValue          = this.value;
        pastSelectionStart = this.selectionStart;
        pastSelectionEnd   = this.selectionEnd;
    }).on("input propertychange", function() {
        var regex = /^[0-9]+\.?[0-9]*$/;

        if (this.value.length > 0 && !regex.test(this.value)) {
            this.value          = pastValue;
            this.selectionStart = pastSelectionStart;
            this.selectionEnd   = pastSelectionEnd;
        }
    });
});

Exemple: JSFiddle

Scénarios couverts

La plupart des recommandations similaires ici échouent à au moins un de ces problèmes ou nécessitent beaucoup de code pour couvrir tous ces scénarios.

1. Autorise uniquement 1 point décimal.
2. Permet home, endet learrow clés.
3. Permet deleteetbackspace à utiliser à n'importe quel index.
4. Permet l'édition à n'importe quel index (tant que l'entrée correspond à l'expression régulière).
5. Permet ctrl + v et shift + insert pour une entrée valide (idem avec clic droit + coller).
6. Ne scintille pas la valeur du texte car le keyup événement n'est pas utilisé.
7. Restaure la sélection après une entrée non valide.

Les scénarios ont échoué

• Commencer par 0.5et supprimer uniquement le zéro ne fonctionnera pas. Cela peut être résolu en changeant l'expression régulière en /^[0-9]*\.?[0-9]*$/puis en ajoutant un événement flou pour ajouter un 0lorsque la zone de texte commence par un point décimal (si vous le souhaitez). Consultez ce scénario avancé pour une meilleure idée de la façon de résoudre ce problème.

Brancher

J'ai créé ce plugin jquery simple pour rendre cela plus facile:

$("input").limitRegex(/^[0-9]+\.?[0-9]*$/);

La meilleure façon consiste à vérifier les contects de la zone de texte chaque fois qu'elle perd le focus.

Vous pouvez vérifier si le contenu est un "nombre" en utilisant une expression régulière.

Ou vous pouvez utiliser le plugin Validation, qui le fait essentiellement automatiquement.

Vérifiez ce code de recherche pour l'utilisation de la base de données:

function numonly(root){
    >>var reet = root.value;
    var arr1 = reet.length;
    var ruut = reet.charAt(arr1-1);
    >>>if (reet.length > 0){
        var regex = /[0-9]|\./;
        if (!ruut.match(regex)){
            var reet = reet.slice(0, -1);
            $(root).val(reet);
        >>>>}
    }
}
//Then use the even handler onkeyup='numonly(this)'

Ceci est un extrait que je viens de faire (en utilisant une partie du code de Peter Mortensen / Keith Bentrup) pour une validation de pourcentage entier sur un champ de texte (jQuery est requis):

/* This validates that the value of the text box corresponds
 * to a percentage expressed as an integer between 1 and 100,
 * otherwise adjust the text box value for this condition is met. */
$("[id*='percent_textfield']").keyup(function(e){
    if (!isNaN(parseInt(this.value,10))) {
        this.value = parseInt(this.value);
    } else {
        this.value = 0;
    }
    this.value = this.value.replace(/[^0-9]/g, '');
    if (parseInt(this.value,10) > 100) {
        this.value = 100;
        return;
    }
});

Ce code:

• Permet d'utiliser les touches numériques principales et le pavé numérique.
• Valide pour exclure les caractères numériques Shift (par exemple #, $,%, etc.)
• Remplace les valeurs NaN par 0
• Remplace par 100 valeurs supérieures à 100

J'espère que cela aide ceux qui en ont besoin.

Trouvé une excellente solution ici http://ajax911.com/numbers-numeric-field-jquery/

Je viens de changer le "keyup" en "keydown" selon mes besoins

Si vous utilisez HTML5, vous n'avez pas besoin d'aller très loin pour effectuer la validation. Utilisez simplement -

<input type="number" step="any" />

L'attribut step permet au point décimal d'être valide.

Autre moyen de conserver la position du curseur sur l'entrée:

$(document).ready(function() {
  $('.numbersOnly').on('input', function() {
    var position = this.selectionStart - 1;

    fixed = this.value.replace(/[^0-9\.]/g, '');  //remove all but number and .
    if(fixed.charAt(0) === '.')                  //can't start with .
      fixed = fixed.slice(1);

    var pos = fixed.indexOf(".") + 1;
    if(pos >= 0)
      fixed = fixed.substr(0,pos) + fixed.slice(pos).replace('.', '');  //avoid more than one .

    if (this.value !== fixed) {
      this.value = fixed;
      this.selectionStart = position;
      this.selectionEnd = position;
    }
  });
});

Avantages:

1. L'utilisateur peut utiliser les touches fléchées, Retour arrière, Supprimer, ...
2. Fonctionne lorsque vous souhaitez coller des nombres

Plunker: Démo de travail

Je viens de trouver un plug-in encore meilleur. Vous donne beaucoup plus de contrôle. Supposons que vous ayez un champ DOB où vous avez besoin qu'il soit numérique mais accepte également les caractères "/" ou "-".

Ça marche super!

Découvrez-le sur http://itgroup.com.ph/alphanumeric/ .

    $(".numeric").keypress(function(event) {
  // Backspace, tab, enter, end, home, left, right
  // We don't support the del key in Opera because del == . == 46.
  var controlKeys = [8, 9, 13, 35, 36, 37, 39];
  // IE doesn't support indexOf
  var isControlKey = controlKeys.join(",").match(new RegExp(event.which));
  // Some browsers just don't raise events for control keys. Easy.
  // e.g. Safari backspace.
  if (!event.which || // Control keys in most browsers. e.g. Firefox tab is 0
      (49 <= event.which && event.which <= 57) || // Always 1 through 9
      (48 == event.which && $(this).attr("value")) || // No 0 first digit
      isControlKey) { // Opera assigns values for control keys.
    return;
  } else {
    event.preventDefault();
  }
});

Ce code a très bien fonctionné sur moi, j'ai juste dû ajouter le 46 dans le tableau controlKeys pour utiliser la période, bien que je ne pense pas que ce soit la meilleure façon de le faire;)

Je l'ai utilisé, avec de bons résultats ..

ini=$("#id").val();
a=0;
$("#id").keyup(function(e){
    var charcode = (e.which) ? e.which : e.keyCode;
    // for decimal point
    if(!(charcode===190 || charcode===110))
    {           // for numeric keys andcontrol keys
        if (!((charcode>=33 && charcode<=57) || 
        // for numpad numeric keys
        (charcode>=96 && charcode<=105) 
        // for backspace
        || charcode==8)) 
        {
            alert("Sorry! Only numeric values allowed.");
            $("#id").val(ini);
        }
        // to include decimal point if first one has been deleted.
        if(charcode===8)
        {
            ini=ini.split("").reverse();
            if(ini[0]==".")
            a=0;                 
        }
    }
    else
    {
        if(a==1)
        {
            alert("Sorry! Second decimal point not allowed.");
            $("#id").val(ini);
        }
        a=1;
    }
    ini=$("#id").val();
});


find keycodes at http://www.cambiaresearch.com/articles/15/javascript-char-codes-key-codes

C'est très simple, nous avons déjà une fonction intégrée javascript "isNaN".

$("#numeric").keydown(function(e){
  if (isNaN(String.fromCharCode(e.which))){ 
    return false; 
  }
});