La saisie de texte HTML autorise uniquement la saisie numérique


852

Existe-t-il un moyen rapide de définir une entrée de texte HTML ( <input type=text />) pour n'autoriser que les frappes numériques (plus '.')?


81
De nombreuses solutions ici ne fonctionnent que lorsque les touches sont enfoncées. Ceux-ci échoueront si les gens collent du texte à l'aide du menu, ou s'ils glissent et déposent du texte dans la saisie de texte. J'ai déjà été mordu par ça. Faites attention!
Bennett McElwee,

83
@JuliusA - vous avez toujours toujours besoin d'une validation côté serveur.
Stephen P

46
<input type="text" onkeypress='return event.charCode >= 48 && event.charCode <= 57'></input>
Droogans

14
@Droogans remarque que désactive également toute autre clé, comme TAB pour passer à l'entrée suivante ou tout autre raccourci non directement impliqué avec une entrée comme cmd + R pour actualiser le site Web si l'entrée est ciblée.
Alejandro Pérez

1
Si vous êtes d'accord avec Plugin, utilisez NumericInput. Démo: jsfiddle.net/152sumxu/2 Plus de détails ici stackoverflow.com/a/27561763/82961
Faiz

Réponses:


1138

Remarque: Ceci est une réponse mise à jour. Les commentaires ci-dessous se réfèrent à une ancienne version qui dérangeait les codes clés.

Javascript

Essayez- le vous-même sur JSFiddle .

Vous pouvez filtrer les valeurs d'entrée d'un texte <input>avec la setInputFilterfonction suivante (prend en charge Copier + Coller, Glisser + Déposer, raccourcis clavier, opérations de menu contextuel, touches non typables, position du curseur, différentes dispositions de clavier et tous les navigateurs depuis IE 9 ) :

// Restricts input for the given textbox to the given inputFilter function.
function setInputFilter(textbox, inputFilter) {
  ["input", "keydown", "keyup", "mousedown", "mouseup", "select", "contextmenu", "drop"].forEach(function(event) {
    textbox.addEventListener(event, function() {
      if (inputFilter(this.value)) {
        this.oldValue = this.value;
        this.oldSelectionStart = this.selectionStart;
        this.oldSelectionEnd = this.selectionEnd;
      } else if (this.hasOwnProperty("oldValue")) {
        this.value = this.oldValue;
        this.setSelectionRange(this.oldSelectionStart, this.oldSelectionEnd);
      } else {
        this.value = "";
      }
    });
  });
}

Vous pouvez maintenant utiliser la setInputFilterfonction pour installer un filtre d'entrée:

setInputFilter(document.getElementById("myTextBox"), function(value) {
  return /^\d*\.?\d*$/.test(value); // Allow digits and '.' only, using a RegExp
});

Voir la démo JSFiddle pour plus d'exemples de filtre d'entrée. Notez également que vous devez toujours effectuer la validation côté serveur!

Manuscrit

En voici une version TypeScript.

function setInputFilter(textbox: Element, inputFilter: (value: string) => boolean): void {
    ["input", "keydown", "keyup", "mousedown", "mouseup", "select", "contextmenu", "drop"].forEach(function(event) {
        textbox.addEventListener(event, function(this: (HTMLInputElement | HTMLTextAreaElement) & {oldValue: string; oldSelectionStart: number | null, oldSelectionEnd: number | null}) {
            if (inputFilter(this.value)) {
                this.oldValue = this.value;
                this.oldSelectionStart = this.selectionStart;
                this.oldSelectionEnd = this.selectionEnd;
            } else if (Object.prototype.hasOwnProperty.call(this, 'oldValue')) {
                this.value = this.oldValue;
                if (this.oldSelectionStart !== null &&
                    this.oldSelectionEnd !== null) {
                    this.setSelectionRange(this.oldSelectionStart, this.oldSelectionEnd);
                }
            } else {
                this.value = "";
            }
        });
    });
}

jQuery

Il existe également une version jQuery de cela. Voir cette réponse .

HTML 5

HTML 5 a une solution native avec <input type="number">(voir la spécification ), mais notez que la prise en charge du navigateur varie:

  • La plupart des navigateurs ne valideront l'entrée que lors de la soumission du formulaire, et non lors de la saisie.
  • La plupart des navigateurs mobiles ne prennent pas en charge les step, minet les maxattributs.
  • Chrome (version 71.0.3578.98) permet toujours à l'utilisateur d'entrer les caractères eet Edans le champ. Voir aussi cette question .
  • Firefox (version 64.0) et Edge (EdgeHTML version 17.17134) permettent toujours à l'utilisateur de saisir n'importe quel texte dans le champ.

Essayez- le vous-même sur w3schools.com .


4
Bien que ce soit un bon choix, cela permet toujours de saisir des caractères comme /, plusieurs points, d'autres opérateurs, etc.
Mahendra Liya

6
Toujours pas supporté par Firefox 21 (je ne parle même pas d'IE9 ou d'une version antérieure ...)
JBE

67
Le numéro de type d'entrée n'est pas destiné à être utilisé pour que votre entrée accepte uniquement les chiffres. Il est destiné aux entrées qui spécifient un «nombre d'articles». Chrome par exemple ajoute deux petites flèches pour augmenter ou diminuer le nombre de un. Une entrée numérique uniquement appropriée est une sorte d'omission ridicule de HTML.
Erwin

9
Le type = "nombre" n'empêche pas réellement la saisie de texte non valide dans le champ; semble que vous pouvez même couper et coller des données de déchets dans le champ, même en chrome.
perfectionniste

6
La seule chose que j'ajouterais à cela est de changer la ligne Ctrl + A pour inclure les utilisateurs de MacOSX:(e.keyCode == 65 && (e.ctrlKey === true || e.metaKey === true))
MForMarlon

281

Utilisez ce DOM

<input type='text' onkeypress='validate(event)' />

Et ce script

function validate(evt) {
  var theEvent = evt || window.event;

  // Handle paste
  if (theEvent.type === 'paste') {
      key = event.clipboardData.getData('text/plain');
  } else {
  // Handle key press
      var key = theEvent.keyCode || theEvent.which;
      key = String.fromCharCode(key);
  }
  var regex = /[0-9]|\./;
  if( !regex.test(key) ) {
    theEvent.returnValue = false;
    if(theEvent.preventDefault) theEvent.preventDefault();
  }
}

12
les paramètres allemands sur un eeepc 900. certaines touches pour une bonne utilisation ne fonctionnent pas: - retour arrière (keyCode: 8) - touches de navigation gauche et droite (keyCode: 37, 38) copier-coller est également possible ...
Michael Piendl

11
La plupart des gens s'en soucient, la présence d'une erreur de script se reflète mal sur votre site.
Robert Jeppesen

14
quelques problèmes avec ce code. Vous pouvez entrer . plus d'une fois, la seconde ne permet pas de supprimer la clé, une solution?
coure2011

4
Je me souciais du retour arrière, de la suppression et des flèches qui ne fonctionnaient pas. Si vous supprimez "theEvent.keycode ||" et ajoutez: "if (/ [- ~] / &&! Regex.test (key)) {" alors cela fonctionne mieux (pour ASCII / UTF de toute façon). Mais cela ne rejettera pas les caractères chinois! :)
Sam Watkins

4
cela permet à quelqu'un de coller des éléments aléatoires à l'entrée
Vitim.us

137

J'ai cherché longuement et durement une bonne réponse à cela, et nous avons désespérément besoin <input type="number", mais à court de cela, ces 2 sont les moyens les plus concis que je pourrais trouver:

<input type="text" 
       onkeyup="this.value=this.value.replace(/[^\d]/,'')">

Si vous n'aimez pas le caractère non accepté affiché pendant une fraction de seconde avant d'être effacé, la méthode ci-dessous est ma solution. Notez les nombreuses conditions supplémentaires, afin d'éviter de désactiver toutes sortes de navigation et de raccourcis clavier. Si quelqu'un sait comment le compacter, faites-le nous savoir!

<input type="text" 
onkeydown="return ( event.ctrlKey || event.altKey 
                    || (47<event.keyCode && event.keyCode<58 && event.shiftKey==false) 
                    || (95<event.keyCode && event.keyCode<106)
                    || (event.keyCode==8) || (event.keyCode==9) 
                    || (event.keyCode>34 && event.keyCode<40) 
                    || (event.keyCode==46) )">

4
input type = "number" arrive en HTML 5 - et vous pouvez utiliser JavaScript comme polyfill de secours
Fenton

5
Bonne méthode mais peut être brisée en appuyant sur une touche non acceptable et en la maintenant enfoncée
Scott Brown

8
Changez le regex en /[^\d+]/et cela fonctionne avec le maintien
boecko

11
@boecko merci pour cela, mais notez que cela devrait être le cas /[^\d]+/. Bonne solution cependant. Aussi @ user235859
Mosselman

11
Il voulait .aussi permettre . Vous devriez réellement le faire/[^0-9.]/g
Qsario

94

En voici une simple qui autorise exactement une décimale, mais pas plus:

<input type="text" oninput="this.value = this.value.replace(/[^0-9.]/g, '').replace(/(\..*)\./g, '$1');" />


12
Poignées: copier + coller, glisser-déposer, autorise uniquement 1 décimale, tabulation, suppression, retour arrière - utilisez celui-ci
Mathemats

Cette logique à l'intérieur de oninput peut-elle être extraite pour pouvoir être utilisée globalement?
ema

@ema - oui, voyez mon autre réponse ici qui montre comment vous pouvez appliquer la règle en utilisant la classe.
billynoah

si vous l'utilisez sur une forme angulaire, la valeur ne sera pas mise à jour dans la valeur de contrôle du formulaire.
Ale_info

Impressionnant. Je change l'événement en this.value = this.value.replace (/ [^ 0-9 .-] / g, '') .replace (/(\..*)\./ g, '$ 1'). remplacer (/ ^ 0 + / g, '') .replace (/ (? <! ^) - / g, ''); De cette façon, il ne gère qu'un - au début et n'autorise pas les 0 au début du nombre.
brenth

54

Et un autre exemple, qui fonctionne très bien pour moi:

function validateNumber(event) {
    var key = window.event ? event.keyCode : event.which;
    if (event.keyCode === 8 || event.keyCode === 46) {
        return true;
    } else if ( key < 48 || key > 57 ) {
        return false;
    } else {
        return true;
    }
};

Attache également à l'événement de pression de touche

$(document).ready(function(){
    $('[id^=edit]').keypress(validateNumber);
});

Et HTML:

<input type="input" id="edit1" value="0" size="5" maxlength="5" />

Voici un exemple jsFiddle


Et le texte collé?
Jason Ebersey

Pourquoi est-ce que j'obtiens "l'événement n'est pas défini" lorsque j'appelle cette fonction?
Vincent

1
cela ne fonctionne pas sur Firefox lorsque le event.keyCode est toujours retourné 0. J'ai corrigé avec le nouveau code: function validateNumber (event) {var key = event.which || event.charCode || event.keyCode || 0; if (clé == 8 || clé == 46 || clé == 37 || clé == 39) {return true; } else if (clé <48 || clé> 57) {return false; } return true; };
Luan Nguyen

1
Comme l'a dit @Jessica, vous pouvez ajouter une apostrophe et même un signe de pourcentage.
Alejandro Nava

1
Très proche! mais autorise plus d'une décimale.
kross du

52

HTML5 a <input type=number>, ce qui vous convient. Actuellement, seul Opera le prend en charge nativement, mais il existe un projet qui a une implémentation JavaScript.


Voici un document définissant les navigateurs prenant en charge cet attribut: caniuse.com/input-number . Au moment de la rédaction de ce document, Chrome et Safari prennent tous deux pleinement en charge ce type de champ. IE 10 a un support partiel et Firefox n'a pas de support.
Nathan Wallace

Le seul problème type=numberest qu'il n'est pas pris en charge par IE9
J Rod

@JRod Il existe un polyfill pour l'ancien IE. Plus d'infos ici .
jkdev

6
Le premier problème est d' type=numberautoriser le caractère ecar il le considère e+10comme un nombre. Le deuxième problème est que vous ne pouvez pas limiter le nombre maximum de caractères dans l'entrée.
Hakan Fıstık,

Un autre problème est que si le type est nombre, je ne peux pas bénéficier des avantages de la définition du type, par exemple: "tel".
ScottyBlades

49

La plupart des réponses ici ont toutes la faiblesse d'utiliser des événements clés .

Beaucoup de réponses limiteraient votre capacité à faire de la sélection de texte avec des macros de clavier, copier / coller et des comportements plus indésirables, d'autres semblent dépendre de plugins jQuery spécifiques, ce qui tue les mouches avec les mitrailleuses.

Cette solution simple semble fonctionner le mieux pour moi multiplateforme, quel que soit le mécanisme de saisie (frappe, copier + coller, copier + coller avec le bouton droit, parole-texte, etc.). Toutes les macros de clavier de sélection de texte fonctionneraient toujours, et cela limiterait même la capacité de celles-ci à définir une valeur non numérique par script.

function forceNumeric(){
    var $input = $(this);
    $input.val($input.val().replace(/[^\d]+/g,''));
}
$('body').on('propertychange input', 'input[type="number"]', forceNumeric);

jQuery 1.7+ nécessaire. Il s'agit d'une réponse plus complète car elle prend en compte les entrées via "copier". Et c'est aussi plus simple!
Memochipan

Une regex alternative: replace(/[^\d]+/g,'')remplacez tous les non-chiffres par une chaîne vide. Le modificateur "i" (insensible à la casse) n'est pas nécessaire.
Memochipan

Cela devrait être au top, car les gestionnaires d'événements "onkey" dans une balise ne devraient plus être propagés ...
gpinkas

Celui-ci est certainement la meilleure réponse ici, mais il n'autorise pas les chiffres avec des nombres décimaux. Une idée de comment cela pourrait fonctionner?
Atirag

6
@Atirag Si vous voulez des décimales, vous pouvez changer l'expression /[^\d,.]+/
régulière

41

J'ai choisi d'utiliser une combinaison des deux réponses mentionnées ici, c'est-à-dire

<input type="number" />

et

function isNumberKey(evt){
    var charCode = (evt.which) ? evt.which : evt.keyCode
    return !(charCode > 31 && (charCode < 48 || charCode > 57));
}

<input type="text" onkeypress="return isNumberKey(event);">


Excellente réponse ... +1. Vous pouvez également réduire l'instruction if à: return !(charCode > 31 && (charCode < 48 || charCode > 57));
schadeck

7
Et si vous supprimiez? Vous voulez des chiffres mais vous voulez probablement que les gens puissent les corriger sans rafraîchir la page ...
Martin Erlic

40

HTML5 prend en charge les expressions rationnelles, vous pouvez donc utiliser ceci:

<input id="numbersOnly" pattern="[0-9.]+" type="text">

Avertissement: certains navigateurs ne le prennent pas encore en charge.


7
HTML5 a également <input type=number>.
Mathias Bynens du

Vrai. Vous devriez en faire une réponse. Oups, @ Ms2ger l'a déjà fait.
james.garriss

Le <type d'entrée = nombre> ajoute des flèches pour augmenter et diminuer dans certains navigateurs, donc cela semble être une bonne solution lorsque nous voulons éviter le spinner
Ayrad

35
Le modèle n'est vérifié que lors de la soumission. Vous pouvez toujours saisir des lettres.
Erwin

Que +signifie l'attribut means in pattern?
PlanetHackers

18

Javascript

function validateNumber(evt) {
    var e = evt || window.event;
    var key = e.keyCode || e.which;

    if (!e.shiftKey && !e.altKey && !e.ctrlKey &&
    // numbers   
    key >= 48 && key <= 57 ||
    // Numeric keypad
    key >= 96 && key <= 105 ||
    // Backspace and Tab and Enter
    key == 8 || key == 9 || key == 13 ||
    // Home and End
    key == 35 || key == 36 ||
    // left and right arrows
    key == 37 || key == 39 ||
    // Del and Ins
    key == 46 || key == 45) {
        // input is VALID
    }
    else {
        // input is INVALID
        e.returnValue = false;
        if (e.preventDefault) e.preventDefault();
    }
}

supplémentaire, vous pouvez ajouter une virgule, un point et un moins (, .-)

  // comma, period and minus, . on keypad
  key == 190 || key == 188 || key == 109 || key == 110 ||

HTML

<input type="text" onkeydown="validateNumber(event);"/ >

Ne fonctionne pas correctement sur les claviers où il faut utiliser la touche Maj pour entrer un nombre (par exemple le clavier européen AZERTY).
Captain Sensible

merci mec, tu comprends vraiment une question! Bel exemple et maniement hors cours. ou, (ce que la plupart des gens veulent s'ils travaillent avec des nombres)
real_yggdrasil

C'est le seul qui fonctionne qui empêche de coller des valeurs non numériques.
DEREK LEE

16

Si simple....

// Dans une fonction JavaScript (peut utiliser HTML ou PHP).

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

Dans votre formulaire, saisissez:

<input type=text name=form_number size=20 maxlength=12 onkeypress='return isNumberKey(event)'>

Avec entrée max. (Ces ci-dessus permet un nombre à 12 chiffres)


Ne fais pas ça! Cela bloque tout, pavé numérique, touches fléchées, touche Supprimer, raccourcis (CTRL + A, CTRL + R par exemple), même la touche TAB, c'est vraiment énervant!
Korri

@Korri Je ne suis pas, quel semble être le problème? Cela a bien fonctionné dans mon cas.
uneakharsh

la première ligne doit être remplacée par:var charCode = (evt.which) ? evt.which : evt.keyCode;
peiman F.

15

2 solutions:

Utiliser un validateur de formulaire (par exemple avec le plugin de validation jQuery )

Effectuez une vérification pendant l'événement onblur (c'est-à-dire lorsque l'utilisateur quitte le champ) du champ de saisie, avec l'expression régulière:

<script type="text/javascript">
function testField(field) {
    var regExpr = new RegExp("^\d*\.?\d*$");
    if (!regExpr.test(field.value)) {
      // Case of error
      field.value = "";
    }
}

</script>

<input type="text" ... onblur="testField(this);"/>

Fait intéressant, j'ai dû donner l'expression régulière "^ \\ d \\.? \\ d * $", mais cela pourrait être dû au fait que la page est exécutée via une transformation XSLT.
Paul Tomblin

Je pense que l'expression régulière est incorrecte. J'ai utilisé cette ligne:var regExpr = /^\d+(\.\d*)?$/;
costa

@costa pas sûr, si l'utilisateur veut entrer .123(au lieu de 0.123) par exemple?
Romain Linsolas

@romaintaz. Vous avez raison, mais vous devez alors modifier l'expression régulière pour vous assurer qu'au cas où il n'y aurait pas de chiffre devant le point, il y aurait des chiffres après le point. Quelque chose comme ceci: var regExpr = /^\d+(\.\d*)?$|^\.\d+$/;.
costa

14

Une approche plus sûre consiste à vérifier la valeur de l'entrée, au lieu de détourner les touches et d'essayer de filtrer les codes clés.

De cette façon, l'utilisateur est libre d'utiliser les flèches du clavier, les touches de modification, le retour arrière, la suppression, l'utilisation des claviers non standard, la souris pour coller, le glisser-déposer du texte et même les entrées d'accessibilité.

Le script ci-dessous permet des nombres positifs et négatifs

1
10
100.0
100.01
-1
-1.0
-10.00
1.0.0 //not allowed

var input = document.getElementById('number');
input.onkeyup = input.onchange = enforceFloat;

//enforce that only a float can be inputed
function enforceFloat() {
  var valid = /^\-?\d+\.\d*$|^\-?[\d]*$/;
  var number = /\-\d+\.\d*|\-[\d]*|[\d]+\.[\d]*|[\d]+/;
  if (!valid.test(this.value)) {
    var n = this.value.match(number);
    this.value = n ? n[0] : '';
  }
}
<input id="number" value="-3.1415" placeholder="Type a number" autofocus>

EDIT: J'ai supprimé mon ancienne réponse parce que je pense qu'elle est désuète maintenant.


Cela semble en effet couvrir la plupart des cas
Zia Ul Rehman Mughal


13

Veuillez trouver ci-dessous la solution mentionnée. Dans cet utilisateur peut être en mesure d'entrer seulement numericvaleur, également utilisateur ne peut pas être en mesure de copy, paste, draget dropen entrée.

Caractères autorisés

0,1,2,3,4,5,6,7,8,9

Personnages non autorisés et personnages lors d'événements

  • Valeur alphabétique
  • Caractères spéciaux
  • Copie
  • Pâte
  • Traîne
  • Laissez tomber

$(document).ready(function() {
  $('#number').bind("cut copy paste drag drop", function(e) {
      e.preventDefault();
  });     
});
function isNumberKey(evt) {
    var charCode = (evt.which) ? evt.which : evt.keyCode;
    if (charCode > 31 && (charCode < 48 || charCode > 57))
        return false;
    return true;
}
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet"/>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>

<input type="text" class="form-control" name="number" id="number" onkeypress="return isNumberKey(event)" placeholder="Enter Numeric value only">

Faites-moi savoir si cela ne fonctionne pas.


11

Si vous souhaitez suggérer à l'appareil (peut-être un téléphone portable) entre alpha ou numérique, vous pouvez utiliser <input type="number">.


11

Un autre exemple où vous pouvez ajouter uniquement des chiffres dans le champ de saisie, ne peut pas les lettres

<input type="text" class="form-control" id="phone" name="phone" placeholder="PHONE" spellcheck="false" oninput="this.value = this.value.replace(/[^0-9.]/g, '').replace(/(\..*)\./g, '$1');">

10

Une implémentation courte et douce utilisant jQuery et replace () au lieu de regarder event.keyCode ou event.which:

$('input.numeric').live('keyup', function(e) {
  $(this).val($(this).val().replace(/[^0-9]/g, ''));
});

Seul petit effet secondaire que la lettre tapée apparaît momentanément et CTRL / CMD + A semble se comporter un peu étrange.


9

input type="number" est un attribut HTML5.

Dans l'autre cas, cela vous aidera à:

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

<input type="number" name="somecode" onkeypress="return isNumberKey(event)"/>

la première ligne doit être remplacée par:var charCode = (evt.which) ? evt.which : evt.keyCode;
peiman F.

9

Code JavaScript:

function validate(evt)
{
    if(evt.keyCode!=8)
    {
        var theEvent = evt || window.event;
        var key = theEvent.keyCode || theEvent.which;
        key = String.fromCharCode(key);
        var regex = /[0-9]|\./;
        if (!regex.test(key))
        {
            theEvent.returnValue = false;

            if (theEvent.preventDefault)
                theEvent.preventDefault();
            }
        }
    }

Code HTML:

<input type='text' name='price' value='0' onkeypress='validate(event)'/>

fonctionne parfaitement car le code de retour arrière est 8 et une expression regex ne le permet pas, c'est donc un moyen facile de contourner le bogue :)


9

Un moyen facile de résoudre ce problème consiste à implémenter une fonction jQuery pour valider avec regex les caractères tapés dans la zone de texte par exemple:

Votre code html:

<input class="integerInput" type="text">

Et la fonction js utilisant jQuery

$(function() {
    $('.integerInput').on('input', function() {
      this.value = this.value
        .replace(/[^\d]/g, '');// numbers and decimals only

    });
});

$(function() {
        $('.integerInput').on('input', function() {
          this.value = this.value
            .replace(/[^\d]/g, '');// numbers and decimals only
            
        });
    });
<script
			  src="https://code.jquery.com/jquery-2.2.4.min.js"
			  integrity="sha256-BbhdlvQf/xTY9gja0Dq3HiwQF8LaCRTXxZKRutelT44="
			  crossorigin="anonymous">
</script>

<input type="text" class="integerInput"/>


		


8

Juste une autre variante avec jQuery utilisant

$(".numeric").keypress(function() {
    return (/\d/.test(String.fromCharCode(event.which) ))
});

8

il suffit d'utiliser type = "number" maintenant cet attribut supportant la plupart des navigateurs

<input type="number" maxlength="3" ng-bind="first">

Je n'ai pas vérifié que les données sont --1(2 caractères moins avant 1).
Ngoc Nam

6

Vous pouvez également comparer la valeur d'entrée (qui est traitée comme une chaîne par défaut) à elle-même forcée en tant que numérique, comme:

if(event.target.value == event.target.value * 1) {
    // returns true if input value is numeric string
}

Cependant, vous devez le lier à un événement comme une touche, etc.


6
<input name="amount" type="text" value="Only number in here"/> 

<script>
    $('input[name=amount]').keyup(function(){
        $(this).val($(this).val().replace(/[^\d]/,''));
    });
</script>

6

J'ai vu de bonnes réponses mais je les aime aussi petites et aussi simples que possible, alors peut-être que quelqu'un en bénéficiera. J'utiliserais javascript Number()et des isNaNfonctionnalités comme celle-ci:

if(isNaN(Number(str))) {
   // ... Exception it is NOT a number
} else {
   // ... Do something you have a number
}

J'espère que cela t'aides.


1
J'aime cela! Une telle solution élégante, aucun regex impliqué.
Levi Roberts

Ce n'est pas une réponse à la question, OP a demandé de n'autoriser que le texte sur une entrée, pas de vérifier par la suite.
Timberman

Oui, c'est la vérité! Mais il y a déjà une réponse acceptée qui je pense est bonne, mais j'ai pensé que cela pourrait aider quelqu'un, en plus c'est agréable et propre.
Sicha

5

Utilisez ce DOM:

<input type = "text" onkeydown = "validate(event)"/>

Et ce script:

validate = function(evt)
{
    if ([8, 46, 37, 39, 48, 49, 50, 51, 52, 53, 54, 55, 56, 57, 35, 36].indexOf(evt.keyCode || evt.which) == -1)
    {
        evt.returnValue = false;
        if(evt.preventDefault){evt.preventDefault();}
    }
}

... OU ce script, sans indexOf, en utilisant deux for...

validate = function(evt)
{
    var CharValidate = new Array("08", "046", "039", "948", "235");
    var number_pressed = false;
    for (i = 0; i < 5; i++)
    {
        for (Ncount = 0; Ncount < parseInt(CharValidate[i].substring(0, 1)) + 1; Ncount++)
        {
            if ((evt.keyCode || evt.which) == parseInt(CharValidate[i].substring(1, CharValidate[i].lenght)) + Ncount)
            {
                number_pressed = true;
            }
        }
    }
    if (number_pressed == false)
    {
        evt.returnValue = false;
        if(evt.preventDefault){evt.preventDefault();}
    }
}

J'ai utilisé l'attribut onkeydown au lieu de onkeypress, car l'attribut onkeydown est vérifié avant l'attribut onkeypress. Le problème serait dans le navigateur Google Chrome.

Avec l'attribut "onkeypress", TAB serait incontrôlable avec "preventDefault" sur google chrome, cependant, avec l'attribut "onkeydown", TAB devient contrôlable!

Code ASCII pour TAB => 9

Le premier script a moins de code que le second, cependant, le tableau de caractères ASCII doit avoir toutes les clés.

Le deuxième script est beaucoup plus gros que le premier, mais le tableau n'a pas besoin de toutes les clés. Le premier chiffre de chaque position du tableau est le nombre de fois que chaque position sera lue. Pour chaque lecture, sera incrémenté de 1 à la suivante. Par exemple:




NCount = 0

48 + NCount = 48

NCount + +

48 + NCount = 49

NCount + +

...

48 + NCount = 57




Dans le cas des clés numériques ne sont que 10 (0 - 9), mais si elles étaient 1 million, il ne serait pas logique de créer un tableau avec toutes ces clés.

Codes ASCII:

  • 8 ==> (Retour arrière);
  • 46 => (Supprimer);
  • 37 => (flèche gauche);
  • 39 => (flèche droite);
  • 48 - 57 => (nombres);
  • 36 => (domicile);
  • 35 => (fin);

5

Il s'agit d'une fonction améliorée:

function validateNumber(evt) {
  var theEvent = evt || window.event;
  var key = theEvent.keyCode || theEvent.which;
  if ((key < 48 || key > 57) && !(key == 8 || key == 9 || key == 13 || key == 37 || key == 39 || key == 46) ){
    theEvent.returnValue = false;
    if (theEvent.preventDefault) theEvent.preventDefault();
  }
}

4

La meilleure façon (autoriser TOUS les types de nombres - réel négatif, réel positif, iinteger négatif, entier positif) est:

$(input).keypress(function (evt){
    var theEvent = evt || window.event;
    var key = theEvent.keyCode || theEvent.which;
    key = String.fromCharCode( key );
    var regex = /[-\d\.]/; // dowolna liczba (+- ,.) :)
    var objRegex = /^-?\d*[\.]?\d*$/;
    var val = $(evt.target).val();
    if(!regex.test(key) || !objRegex.test(val+key) || 
            !theEvent.keyCode == 46 || !theEvent.keyCode == 8) {
        theEvent.returnValue = false;
        if(theEvent.preventDefault) theEvent.preventDefault();
    };
}); 

4

Il s'agit de la version étendue de la solution de geowa4 . Supports minet maxattributs. Si le nombre est hors limites, la valeur précédente sera affichée.

Vous pouvez le tester ici.

Usage: <input type=text class='number' maxlength=3 min=1 max=500>

function number(e) {
var theEvent = e || window.event;
var key = theEvent.keyCode || theEvent.which;
if(key!=13&&key!=9){//allow enter and tab
  key = String.fromCharCode( key );
  var regex = /[0-9]|\./;
  if( !regex.test(key)) {
    theEvent.returnValue = false;
    if(theEvent.preventDefault) theEvent.preventDefault();
    }   
  }
}

$(document).ready(function(){
    $("input[type=text]").filter(".number,.NUMBER").on({
        "focus":function(e){
         $(e.target).data('oldValue',$(e.target).val());
            },
        "keypress":function(e){
                e.target.oldvalue = e.target.value;
                number(e);
            },
        "change":function(e){
            var t = e.target;
            var min = $(t).attr("min");
            var max = $(t).attr("max");
            var val = parseInt($(t).val(),10);          
            if( val<min || max<val)
                {
                    alert("Error!");
                    $(t).val($(t).data('oldValue'));
                }

            }       
    });     
});

Si les entrées sont dynamiques, utilisez ceci:

$(document).ready(function(){
    $("body").on("focus","input[type=text].number,.NUMBER",function(e){
        $(e.target).data('oldValue',$(e.target).val());
    }); 
    $("body").on("keypress","input[type=text].number,.NUMBER",function(e){
        e.target.oldvalue = e.target.value;
        number(e);
    }); 
    $("body").on("change","input[type=text].number,.NUMBER",function(e){
        var t = e.target
        var min = $(t).attr("min");
        var max = $(t).attr("max");
        var val = parseInt($(t).val());         
        if( val<min || max<val)
            {
                alert("Error!");
                $(t).val($(t).data('oldValue'));
            }
    }); 
});

@UserB cela ne devrait rien supprimer.
En utilisant notre site, vous reconnaissez avoir lu et compris notre politique liée aux cookies et notre politique de confidentialité.
Licensed under cc by-sa 3.0 with attribution required.