Comment faire pour que la balise D'entrée HTML n'accepte que des valeurs numériques?

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

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

http://www.pageresource.com/html5/input-validation-tutorial /

bien que, si votre doctype n'est pas html alors je pense que vous aurez besoin d'utiliser du javascript/jquery.

s'il vous plaît essayer ce code avec le champ d'entrée lui-même

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

ça marchera très bien.

Vous pouvez utiliser un <input type="number" /> . Cela permettra seulement les chiffres en othe zone de saisie.

exemple: http://jsfiddle.net/SPqY3 /

veuillez noter que l'étiquette d'entrée type="number" 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: le soutien de navigateur est beaucoup mieux maintenant il est soutenu par ce qui suit:

• Chrome 6+
• Firefox 29+
• Opéra 10.1+
• Safari 5+
• Edge
• (Internet Explorer 10+)

function AllowOnlyNumbers(e) {

    e = (e) ? e : window.event;
    var key = null;
    var charsKeys = [
        97, // a  Ctrl + a Select All
        65, // A Ctrl + A Select All
        99, // c Ctrl + c Copy
        67, // C Ctrl + C Copy
        118, // v Ctrl + v paste
        86, // V Ctrl + V paste
        115, // s Ctrl + s save
        83, // S Ctrl + S save
        112, // p Ctrl + p print
        80 // P Ctrl + P print
    ];

    var specialKeys = [
    8, // backspace
    9, // tab
    27, // escape
    13, // enter
    35, // Home & shiftKey +  #
    36, // End & shiftKey + $
    37, // left arrow &  shiftKey + %
    39, //right arrow & '
    46, // delete & .
    45 //Ins &  -
    ];

    key = e.keyCode ? e.keyCode : e.which ? e.which : e.charCode;

    //console.log("e.charCode: " + e.charCode + ", " + "e.which: " + e.which + ", " + "e.keyCode: " + e.keyCode);
    //console.log(String.fromCharCode(key));

    // check if pressed key is not number 
    if (key && key < 48 || key > 57) {

        //Allow: Ctrl + char for action save, print, copy, ...etc
        if ((e.ctrlKey && charsKeys.indexOf(key) != -1) ||
            //Fix Issue: f1 : f12 Or Ctrl + f1 : f12, in Firefox browser
            (navigator.userAgent.indexOf("Firefox") != -1 && ((e.ctrlKey && e.keyCode && e.keyCode > 0 && key >= 112 && key <= 123) || (e.keyCode && e.keyCode > 0 && key && key >= 112 && key <= 123)))) {
            return true
        }
            // Allow: Special Keys
        else if (specialKeys.indexOf(key) != -1) {
            //Fix Issue: right arrow & Delete & ins in FireFox
            if ((key == 39 || key == 45 || key == 46)) {
                return (navigator.userAgent.indexOf("Firefox") != -1 && e.keyCode != undefined && e.keyCode > 0);
            }
                //DisAllow : "#" & "$" & "%"
            else if (e.shiftKey && (key == 35 || key == 36 || key == 37)) {
                return false;
            }
            else {
                return true;
            }
        }
        else {
            return false;
        }
    }
    else {
        return true;
       }
    }

<h1>Integer Textbox</h1>
    <input type="text" autocomplete="off" id="txtIdNum" onkeypress="return AllowOnlyNumbers(event);" />

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

onkeyup se déclenche lorsque la clé est libérée.

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

Si c'est pas un nombre, la valeur est fixée à 1000 : Si c'est un nombre, la valeur est définie à la valeur.

note: pour une raison quelconque, il ne fonctionne avec type="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"
>

Profitez-en!

je me suis battu avec celui-ci un moment. De nombreuses solutions ici et ailleurs semblaient compliquées. Cette solution utilise jQuery/javascript aux côtés de 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ù min=" 1 " dans la balise d'entrée et abc = 1 dans le contrôle isNaN (). Pour les nombres positifs seulement, vous pouvez changer ces valeurs à 0 et même simplement supprimer le min = "1" de la balise d'entrée pour tenir compte du négatif nombre.

cela fonctionne aussi pour plusieurs boîtes (et pourrait vous faire gagner du temps de chargement en les faisant individuellement par id), il suffit d'ajouter 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 "fallback" que vous préférez dans tous les cas où NaN est retourné: -). Aussi W3 déclare ici que la version globale de NaN Tapera moulé avant vérification qui donne un peu plus de proofing (nombre.isNaN () ne fait pas cela). Toutes les valeurs envoyées à un serveur/backend doit encore être validé!

<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 bu utile:

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

Note : cross-browser et regex in literal.

si vous pouvez utiliser HTML5 vous pouvez faire <input type="number" /> Si ce n'est pas le cas, vous devrez le faire par javascript car vous avez dit qu'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;
}

P. S n'a pas tester le code, mais il devrait être plus ou moins correct si pas vérifier les fautes de frappe :D Vous pourriez vouloir ajouter quelques choses comme quoi faire si la chaîne est nulle ou vide etc. Aussi, vous pouvez rendre cela plus rapide :d

et si on utilisait <input type="number"...> ?

http://www.w3schools.com/tags/tag_input.asp

aussi, voici une question qui a quelques exemples D'utilisation de Javascript pour la validation .

mise à Jour: liée à une meilleure question (merci alexblum).

si pas ensemble d'entiers 0

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

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

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 que le if peut être simplifiée.

alors il ressemble à ceci, qui est beaucoup plus joli:

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

commenterait le post original, mais ma réputation est trop basse pour le faire (vient de créer ce compte).

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

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

ce champ d'entrée ne permet que les valeurs numériques. Vous pouvez également spécifier la valeur minimale et la valeur maximale qui devrait être acceptée par ce domaine.

s'il vous Plaît voir mon projet de la croix-navigateur filtre de valeur de la saisie de texte élément sur votre page web à l'aide du langage JavaScript: la Clé d'Entrée du Filtre . Vous pouvez filtrer la valeur comme un nombre entier, un nombre à virgule, ou écrire un filtre personnalisé, tel qu'un numéro de téléphone sur le filtre. Voir un exemple de code d'entrée 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>

Voir aussi ma page " Integer field: "de l'exemple de le filtre de la clé d'entrée

ajouter à l'intérieur de votre étiquette d'entrée: onkeyup="valeur=valeur.remplacer (/[^\D] / g,")"

Je l'utilise pour les codes postaux, rapide et facile.

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

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

http://www.texotela.co.uk/code/jquery/numeric/ entrée numérique crédits à Leo V Chan pour avoir mentionné ceci et bien sûr TexoTela. avec une page de test.

pour usage général, vous pouvez avoir la validation JS comme suit:

il fonctionnera pour le clavier numérique et la clé de numéro normal

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

j'ai utilisé l'expression régulière pour remplacer la valeur d'entrée avec 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">

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]+">