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
la source
stackoverflow.com/questions/469357/…
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
La duplication possible de la saisie de texte HTML autorise uniquement la saisie numérique
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
la 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
la 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
la 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
la 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
la 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
la 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
la 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
la 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
la 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
la 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
la 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
la 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.
la 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
la 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 [email protected]">
	<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
la 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
la source
2

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

Naveen Kumar
la 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
la 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
la 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
la 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
la 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
la 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
la source