si vous voulez restreindre l'entrée (par opposition à la validation), vous pouvez 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 immédiatement à l'utilisateur de savoir qu'il ne peut pas entrer de caractères alpha, etc. plutôt que plus tard au cours de la phase de validation.

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

j'ai pensé que la meilleure réponse était celle-ci.

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

mais je suis d'accord qu'il est un peu d'une douleur que les touches fléchées et supprimer le bouton claquer curseur à la fin de la chaîne ( et à cause de cela, il a été donné un coup de pied en arrière à moi dans les essais)

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 n'importe quel bouton appuyé qui ne va pas provoquer le texte à changer juste l'ignorer. Avec cela, vous pouvez frapper des flèches et supprimer sans sauter à la fin, mais il efface tout texte non numérique.

Le jquery.plugin numérique a quelques bugs que j'ai notifié à l'auteur. Il permet de multiples points décimaux dans Safari et Opera, et vous ne pouvez pas taper backspace, touches fléchées, ou plusieurs autres caractères de contrôle dans Opera. J'avais besoin d'une entrée de nombre entier positif donc j'ai fini par écrire le mien à 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 mis en œuvre ses propres jQuery.isNumeric () ajouté en v1.7.

jQuery.isNumeric( value )

détermine si son argument est unumber.

Échantillons des résultats

$.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 comment lier l'isNumeric () dans avec l'auditeur de l'é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 numérique() mentionné ci-dessus, ne fonctionne pas dans Opera (vous ne pouvez pas backspace, supprimer ou même utiliser les touches Back ou forward).

le code ci-dessous en 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, il s'agit d'entrée purement numérique (plus backspace, supprimer, touches forward/back) seulement, mais peut facilement être modifié pour inclure des points et des caractères en moins.

vous pouvez utiliser le validation plugin avec son nombre () méthode.

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

pas besoin pour le code long pour la restriction d'entrée de nombre juste essayer ce code.

il accepte également valide int & float les deux valeurs.

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

jQuery Approach

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

mise à JOUR

les réponses ci - dessus sont pour la plupart des cas d'utilisation-validation entrée comme un nombre.

Mais ci - dessous est l'extrait de code pour les cas d'Utilisation spéciale

• Permettant de nombres négatifs
• montrant la touche invalide avant de l'enlever.

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

ci-dessous est ce que j'utilise pour bloquer littéralement les touches. Cela permet seulement des nombres 0-9 et un point décimal. Facile à mettre en œuvre, 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)">

comme une légère amélioration à cette suggestion , vous pouvez utiliser le plugin de Validation avec son nombre () , chiffres , et gamme méthodes. Par exemple, ce qui suit garantit que vous obtenez un entier positif entre 0 et 50:

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

vous ne voyez pas d'alphabets apparence magique et disparition sur key down. Cela fonctionne sur la pâte de souris aussi.

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

j'ai d'abord essayé de résoudre cela en utilisant jQuery, mais je n'étais pas heureux que des caractères indésirables (non-chiffres) apparaissent réellement dans le champ d'entrée juste avant d'être retiré sur keyup.

à la recherche 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 Live exemple: http://jsfiddle.net/u8sZq/

décimal points (non-négatif)

pour permettre un seul point décimal, vous pourriez 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: Juste écrit ce. Semble être au travail. Exemple en direct: http://jsfiddle.net/tjBsF/

autres personnalisations

• pour permettre plus de symboles à taper, il suffit d'ajouter ceux de l'expression régulière qui agit comme filtre de base du code char.
• pour mettre en œuvre des restrictions contextuelles simples, regardez le contenu actuel (État) du champ d'entrée (oToCheckField.valeur)

certaines choses qui pourraient vous intéresser:

• un seul point décimal autorisé
• autoriser le signe moins seulement si placé au début de la chaîne. Cela permettrait pour les nombres négatifs.

lacunes

• la position caret n'est pas disponible à l'intérieur de la fonction. Cela a grandement réduit les restrictions contextuelles que vous pouvez mettre en œuvre (par exemple, pas deux symboles consécutifs égaux). Pas sûr de ce que la meilleure façon d'accéder aux il est.

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

Thanks for the post Dave Aaron Smith

j'ai modifié votre réponse pour accepter les décimales et les nombres de la section nombre. Ce travail 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 voulez:

$('selector').ForceNumericOnly();

HTML5 prend en charge le nombre de type d'entrée avec une prise en charge globale du navigateur 88%+ selon CanIUse à partir D'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 clavier Android sera optimisé pour la saisie des numéros.

il est également possible d'utiliser le texte de type input avec le nouveau paramètre"pattern". Plus de détails dans la spécification HTML5.

je pense que c'est mieux que jquery solution, puisque dans cette question fournie jQuery solution ne supportent pas des milliers de séparateur. 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 le feedback visuel (lettre incorrecte s'affiche avant de disparaître)
• permet des décimales
• captures multiples"."
• n'a aucun problème avec le del gauche/droite etc.

/* voici la version de mon navigateur comment autoriser seulement numérique (0-9) dans la saisie HTML en utilisant 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();
            }
        }

  });

vous pouvez utiliser decorplanit.com . Ils ont un support agréable pour numérique, ainsi que la monnaie, l'arrondissement, etc.

j'ai utilisé dans un environnement IE6, avec peu de retouches css, et ce fut un succès raisonnable.

par exemple, une classe css numericInput pourrait être définie, et elle pourrait être utilisée pour décorer vos champs avec les masques d'entrée numériques.

adapté de autoNumeric site web:

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

je pense que c'est une bonne façon de résoudre ce problème et il 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 échouent ici au moins une de celles-ci ou nécessitent beaucoup de code pour couvrir tous ces scénarios.

1. permet 1 décimale seulement point.
2. permet home , end , et les touches arrow .
3. permet d'utiliser delete et backspace à n'importe quel indice.
4. permet l'édition à n'importe quel index (à condition que l'entrée corresponde au regex).
5. permet ctrl+v et shift+insert pour une entrée valide (même avec clic droit + coller).
6. ne clignote pas la valeur du texte parce que l'événement keyup n'est pas utiliser.
7. rétablit la sélection après une entrée invalide.

Scénarios "échec de l'1519210920"

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