jQuery : quelle est la meilleure façon de restreindre la saisie de "chiffres" dans les zones de texte ? (autoriser les points décimaux)

Question

Quelle est la meilleure façon de restreindre la saisie de "chiffres" dans les zones de texte ?

Je cherche quelque chose qui permette les points décimaux.

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 mis en place sa propre jQuery.isNumeric() ajouté dans la v1.7. Voir : https://stackoverflow.com/a/20186188/66767

Answer 1

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

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

Et :

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

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

Vous devrez quand même valider parce que la saisie peut être remplie par un copier-coller avec la souris ou éventuellement par un autocompleteur de formulaire qui ne déclenche pas nécessairement les événements de touche.

Answer 2

Mise à jour

Il existe une nouvelle solution 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 permet de gérer correctement le copier/coller, le glisser/déposer, les raccourcis clavier, les opérations du menu contextuel, les touches non typables et toutes les dispositions de clavier.

Voir cette réponse ou essayez-le vous-même sur JSFiddle .

plugin jquery.numeric

J'ai mis en œuvre avec succès de nombreux formulaires avec le jquery.numeric plugin.

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

De plus, cela fonctionne aussi avec les zones de texte !

Cependant, notez que Ctrl+A, Copier+Coller (via le menu contextuel) et Drag+Drop no fonctionnent comme prévu.

HTML 5

Avec un support plus large de la norme HTML 5, nous pouvons utiliser pattern et number type pour input pour restreindre l'entrée de numéros uniquement. Dans certains navigateurs (notamment Google Chrome), il est également possible de restreindre le collage de contenu non numérique. Plus d'informations sur number et d'autres types d'entrée plus récents est disponible aquí .

Answer 3

J'ai pensé que la meilleure réponse était celle ci-dessus pour faire ça.

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

mais je suis d'accord pour dire que c'est un peu pénible que les touches fléchées et le bouton de suppression amènent le curseur à la fin de la chaîne (et à cause de cela, il m'a été renvoyé lors des tests).

J'ai ajouté un simple changement

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

Ainsi, si un bouton est pressé sans que le texte soit modifié, il suffit de l'ignorer. Avec cette méthode, vous pouvez appuyer sur les flèches et supprimer sans sauter à la fin, mais cela efface tout texte non numérique.

Answer 4

Le plugin jquery.numeric a quelques bogues dont j'ai informé l'auteur. Il autorise les décimales multiples dans Safari et Opera, et vous ne pouvez pas taper la touche d'espacement arrière, les flèches ou plusieurs autres caractères de contrôle dans Opera. J'avais besoin de saisir des nombres entiers positifs, alors j'ai fini par écrire mon propre plugin.

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

Answer 5

Plus de plugins, jQuery a mis en œuvre sa 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 la fonction isNumeric() à l'écouteur d'événements.

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