jQuery: quelle est la meilleure façon de restreindre la saisie «numérique» uniquement pour les zones de texte? (autoriser les points décimaux)

228

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

wenbert
la source
3
C'est une question d'opinion, mais très utile. Les questions basées sur l'opinion devraient être autorisées. La personne qui recherche cette information doit seulement être consciente qu'il ne s'agit que d'une réponse basée sur une opinion. Un TAG serait suffisant.
Thiago C. S Ventura
voici un bel article avec une démo en direct codepedia.info/…
Satinder singh

Réponses:

198

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 .

TheVillageIdiot
la source
5
Ce plugin ne vous permet pas d'utiliser le retour arrière dans Opera.
Darryl Hein
6
@Darryl, la source ne fait que quelques dizaines de lignes, donc je suis sûr de la modifier pour qu'elle soit banale. Je viens de trouver ce plugin et de le modifier pour qu'il y ait maintenant une allowDecimaloption pour chaque fois que je veux seulement autoriser des valeurs entières .. la source est très simple et bien écrite.
Earlz
1
Cela ne fonctionne pas lors du copier-coller dans les champs de saisie qui sont de type="number".
Tallmaris
@Tallmaris c'est en effet une question et une réponse très anciennes. Il y a eu beaucoup de changements au HTML et devraient être considérés.
TheVillageIdiot
Bonjour @TheVillageIdiot, vous avez raison. Je ne voulais pas paraître grossier dans le commentaire (qui est probablement un peu sec) :) Le fait est que j'ai vu des commentaires récents, donc je voulais juste préciser que ce n'est probablement pas, pour le moment, la meilleure solution pour le problème.
Tallmaris
288

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.

Keith Bentrup
la source
4
+1 - J'allais suggérer la même chose. C'est un très bon point de noter que cette forme de validation peut avoir lieu par frappe, plutôt qu'une fois à la fin. La seule chose que j'ajouterais est une forme d'alerte indiquant que ce que l'utilisateur tape est rejeté. Le fait de ne pas montrer les lettres incitera trop de gens à penser que leur clavier est cassé. peut-être modifier subtilement la couleur de l'arrière-plan ou de la bordure ... tant que l'utilisateur sait que votre application fait réellement quelque chose.
nickf
D'accord. j'ai un exemple sur tarbuilders.com . si vous cliquez sur "contact", le formulaire vérifie l'entrée utilisateur à la volée et s'il est valide, il y a une bordure verte et une coche. invalide -> rouge et "x"
Keith Bentrup
5
Consultez cette réponse pour résoudre le problème des touches fléchées.
Hanna
Veuillez noter que vous pouvez toujours coller des caractères et des lettres avec le bouton droit de la souris, cliquez sur> coller. Un moyen facile de résoudre ce problème serait:$doc.on('keyup blur input propertychange', 'input[name="price"]', function(){$(this).val($(this).val().replace(/[^0-9\.]/g,''));});
Rens Tillmann
1
CRAP, si j'écris des chiffres, c'est-à-dire "123", puis que j'appuie sur une touche
alphabétique
102

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.

James Nelli
la source
27
Pour de meilleures performances, créez un résultat var avec replace au lieu de l'exécuter deux fois.
DriverDan
4
keypresspourrait être utilisé pour simplifier davantage cela, car apparemment keyupet keydowndéclencher sur n'importe quelle touche du clavier, alors que keypress seuls les déclencheurs sur les touches "caractère" (donc ne pas déclencher sur la flèche et supprimer les touches). Voir cette réponse pour référence: stackoverflow.com/a/1367720/1298685
Ian Campbell
Il accepte plus d'une décimale. Comment accepter une seule décimale. J'ai demandé le champ de texte du montant. Il prend également le 12.5.6. Comment restreindre pour un point.
niru dyogi
@IanCampbell keypress signifie que vous pouvez entrer un caractère pour commencer qui ne sera pas supprimé. Ne fonctionnera pas. Keydown fait la même chose. Je ne peux que le faire fonctionner avec keyup.
nickdnk
54

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();
  }
});
Dave Aaron Smith
la source
Il n'est pas possible de saisir un 0 en utilisant ce code. Testé avec Chrome et FF sur Mac.
jaredstenquist
1
J'ai mis à jour ceci afin d'accepter 0 chiffre (48 == event.which && ($ (this) .val ()> 0)) || // No 0 premier chiffre
aljordan82
C'est une excellente solution mais il manque des décimales, il suffit d'ajouter (46 == event.which &&! ($ (This) .val (). Includes ("."))) ||
DiamondDrake
Impossible de taper 0 du tout.
PJ7
47

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);
   }
});
Praveen
la source
+1 pour aucun plugin. Je voudrais ajouter une légère modification pour autoriser le séparateur de milliers. Au lieu de le var v = this.value;changer en var v = this.value.replace(/,/g,'');. Des nombres tels que 21,345,67.800sont trop pris en compte.
maan81
Est-ce que quelqu'un sait comment cela vérifie les chiffres? Utilise-t-il des codes clés ou des expressions régulières? Important si vous envisagez différentes dispositions de clavier.
Christopher Grigg
2
C'est très proche. Cependant, si vous maintenez une touche de caractère enfoncée, elle n'exécute pas la vérification correctement. Le personnage "courra". Essayez plutôt ceci: $(document).on('keyup keypress', '#somethingSomething', function(){ var aValue = $(this).val(); if($.isNumeric(aValue) === false){ $(this).val(aValue.slice(0,-1)); } });
Gwi7d31
34

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.

Mike Gibbs
la source
le pavé numérique n'est pas non plus autorisé
Graham
25

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

$("#myform").validate({
  rules: {
    field: {
      required: true,
      number: true
    }
  }
});
Dror
la source
FYI - number () ne fonctionne pas avec les nombres exponentiels.
ScottLenart
18

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 />

vinayakj
la source
14

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)">
kaleazy
la source
Si quelqu'un se pose la question, vous pouvez limiter les décimales en supprimant charCode != 46de l'instruction if. Très bonne réponse!
Gaʀʀʏ
Exactement, j'ai supprimé le charCode! = 46 pour sauter les décimales. Merci kaleazy, cette réponse a très bien fonctionné pour moi.
msqar
3
C'est une mauvaise solution car elle ne prend pas en compte le retour arrière, les flèches, les touches de contrôle et autres frappes nécessaires.
DriverDan
Je viens de publier une solution similaire à celle-ci, mais gère également le retour arrière, les flèches et n'utilise aucun code clé codé en dur. Découvrez-le ici: stackoverflow.com/a/23468513/838608
Håvard Geithus
11

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]
    }
  }
});
Brad Parks
la source
9

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, ''));
});
Null Head
la source
Bien que n'autorisant pas les décimales, j'ai trouvé que c'était la méthode la plus simple pour les entiers.
nickdnk
Pour la décimale, vous pouvez probablement mettre à jour l'expression régulière à quelque chose comme/[^0-9.]/g
Null Head
Je n'ai pas besoin de décimales. C'est juste parce que OP l'a fait, mais oui :)
nickdnk
8

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.

Håvard Geithus
la source
6

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();
  }
});
lekshmi
la source
6
   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();
David Freire
la source
5

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/

Mladen Adamovic
la source
4

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.
mordy
la source
4

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

  });
Roger
la source
3

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

Maciej Łebkowski
la source
3

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!
Zéro distraction
la source
autoNumeric est définitivement la voie à suivre
Prethen
3

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]*$/);
David Sherret
la source
2

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.

jrharshath
la source
L'expression régulière serait /^\d*\.{0,1}\d+$/
Chetan S
2

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)'
Alex Homm
la source
2

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.

Francisco Alvarado
la source
2

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.

Jay Blanchard
la source
2
Pas le cas, Firefox et Opera autorisent la saisie de texte non numérique
Michael Fever
@MichaelDeMutis vous avez raison, il autorise la saisie de texte non numérique mais échoue la validation dans FF (je n'ai pas eu l'occasion de tester dans Opera).
Jay Blanchard
2

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

Carlos Toledo
la source
1

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/ .

Bachir El Khoury
la source
1
    $(".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;)

Reedyseth
la source
1

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
Kaustubh
la source
1

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; 
  }
});
Jyothu
la source