Comment faire en sorte que la balise d'entrée HTML n'accepte que des valeurs numériques?

143

Je dois m'assurer qu'un certain <input>champ ne prend que des nombres comme valeur. L'entrée ne fait pas partie d'un formulaire. Par conséquent, il n'est pas soumis, donc la validation lors de la soumission n'est pas une option. Je souhaite que l'utilisateur ne puisse pas saisir de caractères autres que des chiffres.

Y a-t-il un moyen efficace d'y parvenir?

html  input  numbers  validating 
— Chiel ten Brinke
source
— alexblum
2
Jetez un œil à ce [lien] [1], qui contient suffisamment d'informations. [1]: stackoverflow.com/questions/469357/…
— Maheshkumar
Celui-ci peut également être utile: stackoverflow.com/questions/995183/…
— Chiel ten Brinke
— emkey08

Réponses:

282

HTML 5

Vous pouvez utiliser le numéro de type d'entrée HTML5 pour limiter uniquement les entrées numériques:

<input type="number" name="someid" />

Cela ne fonctionnera que dans le navigateur de plaintes HTML5. Assurez-vous que le doctype de votre document html est:

<!DOCTYPE html>

Voir également https://github.com/jonstipe/number-polyfill pour une prise en charge transparente dans les navigateurs plus anciens.

JavaScript

Mise à jour: Il existe une nouvelle solution très simple pour cela:

Il vous permet d'utiliser n'importe quel 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 saisissables et toutes les dispositions de clavier.

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

Pour un usage général, vous pouvez avoir la validation JS comme ci-dessous:

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

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

Si vous souhaitez autoriser les décimales, remplacez la "condition if" par ceci:

if (charCode > 31 && (charCode != 46 &&(charCode < 48 || charCode > 57)))

Source: la saisie de texte HTML autorise uniquement la saisie numérique

Démo de JSFiddle: http://jsfiddle.net/viralpatel/nSjy7/

— Patel viral
source
6
Oui, cela fonctionne pour moi à la fois dans Firefox et Chrome. Bizarre que js soit nécessaire pour une chose aussi simple.
— Chiel ten Brinke
7
Ne fonctionne pas dans Chrome 30. Je n'ai aucun problème à taper des lettres dans votre entrée "nombre" dans le violon. Hmmm ...
— Ben
2
Que faire si quelqu'un veut entrer des valeurs flottantes comme 8,9?
— syed shah
6
pour une solution plus robuste, pensez également au copier-coller peut ajouter des lettres à cet exemple!
— Neil
3
Oups!! la première ligne doit être remplacée par:var charCode = (evt.which) ? evt.which : evt.keyCode;
— peiman F.
33

Vous pouvez également utiliser l'attribut pattern dans html5:

<input type="text" name="name" pattern="[0-9]" title="Title" />

Tutoriel de validation d'entrée

Bien que, si votre doctype ne l'est pas, htmlje pense que vous devrez utiliser du javascript / jquery.

— martincarlin87
source
3
Bien que Firefox donne à la zone de saisie une bordure rouge lorsque des non-nombres sont saisis, dans Firefox et Chrome, vous pouvez saisir des caractères non numériques dans la zone de saisie.
— Chiel ten Brinke
quel doctype utilisez-vous sur votre page?
— martincarlin87
ok, peut-être qu'il n'est pas pris en charge dans les versions de navigateur que vous avez? Pas sûr à 100%, mais pour être honnête, j'utiliserais des js pour valider également, je ne me
— fierais
7
la propriété vous permet d'entrer des nombres mais pas de soumettre le formulaire.
— My1
1
SOUMETTRE UNIQUEMENT LA VALIDATION!
— Eric Hodonsky
16

Code rapide et facile

<input type="text" onkeypress="return (event.charCode !=8 && event.charCode ==0 || (event.charCode >= 48 && event.charCode <= 57))" />

Cela permettra l'utilisation de nombres et de retour arrière uniquement.

Si vous avez également besoin d'une partie décimale, utilisez ce fragment de code

<input type="text" onkeypress="return (event.charCode !=8 && event.charCode ==0 || ( event.charCode == 46 || (event.charCode >= 48 && event.charCode <= 57)))" />
— abhijithvijayan
source
13

Veuillez essayer ce code avec le champ de saisie lui-même

<input type="text" name="price" id="price_per_ticket" class="calculator-input" onkeypress="return event.charCode >= 48 && event.charCode <= 57"></div>

cela fonctionnera très bien.

— subindas pm
source
comment supprimer le retour arrière alors?
— 6by3
7

Vous pouvez utiliser un fichier <input type="number" />. Cela permettra uniquement de saisir des nombres dans la zone de saisie.

Exemple: http://jsfiddle.net/SPqY3/

Veuillez noter que la type="number"balise d' entrée n'est prise en charge que dans les navigateurs plus récents.

Pour Firefox, vous pouvez valider l'entrée en utilisant javascript:

http://jsfiddle.net/VmtF5/

Mise à jour 2018-03-12: La prise en charge du navigateur est bien meilleure maintenant, elle est prise en charge par les éléments suivants:

  • Chrome 6+
  • Firefox 29+
  • Opera 10.1+
  • Safari 5+
  • Bord
  • (Internet Explorer 10+)
— starbeamrainbowlabs
source
1
Il semble fonctionner très bien dans Chrome, mais pas dans Firefox.
— Chiel ten Brinke
Ah. C'est parce que Firefox ne prend pas en charge le type d'entrée = nombre. Vous pouvez également utiliser du javascript pour valider l'entrée lorsque l'utilisateur saisit le texte. Réponse mise à jour.
— starbeamrainbowlabs
Le jscript sur jsfiddle.net/VmtF5 ne fonctionnera pas non plus. Même si 1 chiffre est au début du caractère, la validation échoue. Essayez-le vous-même sur jsfiddle
— Akshay
@aarn Cela fonctionne pour moi (voir i.imgur.com/AWdmEov.png ), quel navigateur utilisez-vous?
— starbeamrainbowlabs
@starbeamrainbowlabs J'utilise Firefox. Aussi, entrez 6abc, cela ne vous montrera pas l'erreur
— Akshay
5 
<input type="text" name="myinput" id="myinput" onkeypress="return isNumber(event);" />

et dans le js:

function isNumber(e){
    e = e || window.event;
    var charCode = e.which ? e.which : e.keyCode;
    return /\d/.test(String.fromCharCode(charCode));
}

ou vous pouvez l'écrire d'une manière compliquée mais utile:

<input onkeypress="return /\d/.test(String.fromCharCode(((event||window.event).which||(event||window.event).which)));" type="text" name="myinput" id="myinput" />

Remarque : cross-browser et regex en littéral.

— Fredrick Gauss
source
comment ajouteriez-vous la possibilité de mettre des entrées comme .5 ou .3?
— user3591637
Ensuite, vous devez considérer les premier et deuxième caractères ( 0.43ou .43) qui pourraient être effectués en vérifiant la valeur de l'entrée actuelle plus la touche enfoncée. Ce serait moche dans le code d'une ligne, je recommande d'utiliser une fonction pour cela. Pour tester un entier ou un flottant, cochez ici .
— Fredrick Gauss
1
vous ne pouvez pas supprimer un numéro entré par erreur
— Chris Sim
5

J'ai utilisé une expression régulière pour remplacer la valeur d'entrée par le modèle nécessaire.

var userName = document.querySelector('#numberField');

userName.addEventListener('input', restrictNumber);
function restrictNumber (e) {  
  var newValue = this.value.replace(new RegExp(/[^\d]/,'ig'), "");
  this.value = newValue;
}
  
<input type="text" id="numberField">
Développer l'extrait

— Shaktish
source
1
C'est pourquoi j'aime regex. Merci, mec, tu as vraiment sauvé ma journée
— Nirmal
4 
<input 
    onkeyup="value=isNaN(parseFloat(value))?1000:value" 
       type="number" 
      value="1000"
>

onkeyup se déclenche lorsque la clé est relâchée.

isNaN(parseFloat(value))? vérifie si la valeur d'entrée n'est pas un nombre.

S'il ne s'agit pas d'un nombre, la valeur est définie sur 1000. :S'il s'agit d'un nombre, la valeur est définie sur la valeur.

Remarque: pour une raison quelconque, cela ne fonctionne qu'avectype="number"

Pour le rendre encore plus excitant, vous pouvez également avoir une limite:

<input 
    onkeyup="value=isNaN(parseFloat(value))||value<0||value>9000?1000:value"
       type="number"
      value="1000"
>

Prendre plaisir!

— utilisateur40521
source
4

Je me suis battu avec celui-ci pendant un moment. De nombreuses solutions ici et ailleurs semblaient compliquées. Cette solution utilise jQuery / javascript avec HTML.

    <input type="number" min="1" class="validateNumber">

    $(document).on('change', '.validateNumber', function() { 
        var abc = parseInt($(this).val());
        if(isNaN(abc)) { abc = 1; }
        $(this).val(abc);
    });

Dans mon cas, je suivais de petites quantités avec une valeur minimale de 1, d'où le min = "1" dans la balise d'entrée et abc = 1 dans le contrôle isNaN (). Pour les nombres positifs uniquement, vous pouvez changer ces valeurs en 0 et même simplement supprimer min = "1" de la balise d'entrée pour permettre des nombres négatifs.

Cela fonctionne également pour plusieurs boîtes (et pourrait vous faire gagner du temps de chargement en les effectuant individuellement par id), ajoutez simplement la classe "validateNumber" si nécessaire.

Explication

parseInt () fait essentiellement ce dont vous avez besoin, sauf qu'il renvoie NaN plutôt qu'une valeur entière. Avec un simple if () vous pouvez définir la valeur de "repli" que vous préférez dans tous les cas où NaN est retourné :-). W3 déclare également ici que la version globale de NaN tapera cast avant la vérification, ce qui donne une preuve supplémentaire (Number.isNaN () ne le fait pas). Toutes les valeurs envoyées à un serveur / backend doivent toujours y être validées!

— Ésaïe
source
4 

function AllowOnlyNumbers(e) {

e = (e) ? e : window.event;
var clipboardData = e.clipboardData ? e.clipboardData : window.clipboardData;
var key = e.keyCode ? e.keyCode : e.which ? e.which : e.charCode;
var str = (e.type && e.type == "paste") ? clipboardData.getData('Text') : String.fromCharCode(key);

return (/^\d+$/.test(str));
}
<h1>Integer Textbox</h1>
    <input type="text" autocomplete="off" id="txtIdNum" onkeypress="return AllowOnlyNumbers(event);" />
Développer l'extrait

JSFiddle: https://jsfiddle.net/ug8pvysc/

— Sameh Saeed
source
1
Lorsque vous collez une valeur contenant du texte, cela le permet
— Chris Sim
1
Il autorise également les caractères spéciaux. Par exemple: á, ã, ê, ó, è, etc.
— AlmostPitt
3

si vous pouvez utiliser HTML5, vous pouvez le faire. <input type="number" /> Sinon, vous devrez soit le faire via javascript, car vous l'avez dit, il n'est pas soumis pour le faire à partir de codebehind.

<input id="numbersOnly" onkeypress='validate()' />

function validate(){
  var returnString;
  var text = document.getElementByID('numbersOnly').value;
  var regex = /[0-9]|\./;
  var anArray = text.split('');
  for(var i=0; i<anArray.length; i++){
   if(!regex.test(anArray[i]))
   {
     anArray[i] = '';
   }
  }
  for(var i=0; i<anArray.length; i++) {
    returnString += anArray[i];
  }
  document.getElementByID('numbersOnly').value = returnString;
}

PS n'a pas testé le code mais il devrait être plus ou moins correct sinon vérifier les fautes de frappe: D Vous pourriez vouloir ajouter quelques autres choses comme quoi faire si la chaîne est nulle ou vide, etc.

— czioutas
source
2

sinon ensemble entier 0

<input type="text" id="min-value" />

$('#min-value').change(function ()
            {   
                var checkvalue = $('#min-value').val();
                if (checkvalue != parseInt(checkvalue))
                    $('#min-value').val(0);
            });
— Websky
source
2

La réponse acceptée:

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

C'est bon mais pas parfait. Cela fonctionne pour moi, mais je reçois un avertissement indiquant que l'instruction if peut être simplifiée.

Ensuite, cela ressemble à ceci, qui est bien plus joli:

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

Je voudrais commenter le message original, mais ma réputation est trop faible pour le faire (je viens de créer ce compte).

— Chris H.
source
2

Vous pouvez utiliser la <input>balise avec l'attribut type = 'number'.

Par exemple, vous pouvez utiliser <input type='number' />

Ce champ de saisie n'autorise que des valeurs numériques. Vous pouvez également spécifier la valeur minimale et la valeur maximale qui doivent être acceptées par ce champ.

— Geeth Chadalawada
source
2

Veuillez consulter mon projet de filtre cross-browser de valeur de l'élément d'entrée de texte sur votre page Web en utilisant le langage JavaScript: Input Key Filter . Vous pouvez filtrer la valeur sous forme de nombre entier, de nombre flottant ou d'écrire un filtre personnalisé, tel qu'un filtre de numéro de téléphone. Voir un exemple de code d'entrée d'un nombre entier:

<!doctype html>
<html xmlns="http://www.w3.org/1999/xhtml" >
<head>
    <title>Input Key Filter Test</title>
	<meta name="author" content="Andrej Hristoliubov anhr@mail.ru">
	<meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
	
	<!-- For compatibility of IE browser with audio element in the beep() function.
	https://www.modern.ie/en-us/performance/how-to-use-x-ua-compatible -->
	<meta http-equiv="X-UA-Compatible" content="IE=9"/>
	
	<link rel="stylesheet" href="https://rawgit.com/anhr/InputKeyFilter/master/InputKeyFilter.css" type="text/css">		
	<script type="text/javascript" src="https://rawgit.com/anhr/InputKeyFilter/master/Common.js"></script>
	<script type="text/javascript" src="https://rawgit.com/anhr/InputKeyFilter/master/InputKeyFilter.js"></script>
	
</head>
<body>
	<h1>Integer field</h1>
<input id="Integer">
<script>
	CreateIntFilter("Integer", function(event){//onChange event
			inputKeyFilter.RemoveMyTooltip();
			var elementNewInteger = document.getElementById("NewInteger");
			var integer = parseInt(this.value);
			if(inputKeyFilter.isNaN(integer, this)){
				elementNewInteger.innerHTML = "";
				return;
			}
			//elementNewInteger.innerText = integer;//Uncompatible with FireFox
			elementNewInteger.innerHTML = integer;
		}
		
		//onblur event. Use this function if you want set focus to the input element again if input value is NaN. (empty or invalid)
		, function(event){ inputKeyFilter.isNaN(parseInt(this.value), this); }
	);
</script>
 New integer: <span id="NewInteger"></span>
</body>
</html>
Développer l'extrait

Voir aussi ma page "Champ entier:" de l'exemple du filtre de clé d'entrée

— Andrej
source
2

Pour un usage général, vous pouvez avoir la validation JS comme ci-dessous:

Cela fonctionnera pour le clavier numérique et les touches numériques normales 

function isNumberKey(evt){
        var charCode = (evt.which) ? evt.which : event.keyCode

if (charCode < 31 || (charCode >= 48 && charCode <= 57 ) || (charCode >= 96 && charCode <= 105 ))
        return true;
    return false;
}

<input name="someid" type="number" onkeypress="return isNumberKey(event)"/>
— YasirPoongadan
source
2

Ajoutez à l'intérieur de votre balise d'entrée: onkeyup = "value = value.replace (/ [^ \ d] / g, '')"

— Naveen Kumar
source
2
Bienvenue à SO! Malheureusement, il s'agit d'une question vieille de 5 ans et demi qui a déjà une réponse acceptée. Vous voudrez peut-être parcourir les questions sans réponses ici: stackoverflow.com/unanswered
— AndroidNoobie
2

J'ai mis à jour certaines réponses publiées pour ajouter ce qui suit:

  • Ajouter la méthode comme méthode d'extension
  • Autoriser la saisie d'un seul point

  • Spécifiez le nombre de nombres autorisé après la virgule décimale.

    String.prototype.isDecimal = function isDecimal(evt,decimalPts) {
    debugger;
    var charCode = (evt.which) ? evt.which : event.keyCode
    if (charCode > 31 && (charCode != 46 && (charCode < 48 || charCode > 57)))
        return false;

    //Prevent more than one point
    if (charCode == 46 && this.includes("."))
        return false;

    // Restrict the needed decimal digits
    if (this.includes("."))
    {
        var number = [];
        number = this.split(".");
        if (number[1].length == decimalPts)
             return false;
     }

     return true;
};
— Plexis Plexis
source
1

Je l'utilise pour les codes postaux, rapidement et facilement.

<input type="text" id="zip_code" name="zip_code" onkeypress="return event.charCode > 47 && event.charCode < 58;" pattern="[0-9]{5}" required></input>
— Justin Buser
source
1

Lorsque vous utilisez ce code, vous ne pouvez pas utiliser "BackSpace Button" dans Mozilla Firefox, vous ne pouvez utiliser le retour arrière que dans Chrome 47 && event.charCode <58; "pattern =" [0-9] {5} "required>

— Wendell Alvarez
source
0

Il est préférable d'ajouter "+" à la condition REGEX afin d'accepter plusieurs chiffres (pas seulement un chiffre):

<input type="text" name="your_field" pattern="[0-9]+">

— Dashko Leonid
source
0

Une façon pourrait être d'avoir un tableau de codes de caractères autorisés, puis d'utiliser la Array.includesfonction pour voir si le caractère saisi est autorisé.

Exemple:

<input type="text" onkeypress="return [45, 48, 49, 50, 51, 52, 53, 54, 55, 56, 57].includes(event.charCode);"/>
— MA1
source
0

Assez simple?

inputField.addEventListener('input', function () {
  if ((inputField.value/inputField.value) !== 1) {
    console.log("Please enter a number");
  }
});
<input id="inputField" type="text">
Développer l'extrait

— Normajean
source
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.