Comment faire en sorte que les balises HTML n'acceptent que les valeurs numériques?
Je dois m'assurer qu'un certain champ <input> ne prend que des nombres en tant que valeur . La saisie ne fait pas partie d'un formulaire. Par conséquent, il n'est pas soumis, la validation lors de la soumission n'est pas une option. Je veux que l'utilisateur ne puisse pas saisir d'autres caractères que des chiffres.
Y a-t-il un moyen élégant d'y parvenir?
HTML 5
Vous pouvez utiliser numéro de type d’entrée HTML5 pour restreindre uniquement les entrées de numéro:
<input type="number" name="someid" />
Cela fonctionnera uniquement dans le navigateur de réclamations HTML5. Assurez-vous que le doctype de votre document html est:
<!DOCTYPE html>
Voir aussi https://github.com/jonstipe/number-polyfill pour la prise en charge transparente dans les anciens navigateurs.
JavaScript
Mise à jour: Il existe une nouvelle solution très simple pour cela:
Il vous permet d'utiliser le type de filtre d'entrée any sur un texte
<input>, y compris divers filtres numériques. Cela gérera correctement Copier + Coller, Glisser + Déposer, raccourcis clavier, opérations du menu contextuel, touches non typables et toutes les dispositions de clavier.
Voir cette réponse ou essayez vous-même sur JSFiddle .
À des fins générales, vous pouvez avoir la validation JS comme ci-dessous:
function isNumberKey(evt){
var charCode = (evt.which) ? evt.which : event.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 n'autorise que la saisie numérique
JSFiddle demo: http://jsfiddle.net/viralpatel/nSjy7/
Vous pouvez également utiliser l'attribut pattern en HTML 5:
<input type="text" name="name" pattern="[0-9]" title="Title" />
Tutoriel de validation d'entrée
Cependant, si votre type de document n’est pas html, alors vous devrez utiliser du javascript/jquery.
S'il vous plaît essayez 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 bien.
Vous pouvez utiliser un <input type="number" />. Cela permettra uniquement aux chiffres d'être entrés dans la zone de saisie.
Exemple: http://jsfiddle.net/SPqY3/
Veuillez noter que la balise input type="number" est uniquement prise en charge par les nouveaux navigateurs.
Pour Firefox, vous pouvez valider l’entrée en utilisant javascript:
Mise à jour 2018-03-12: La prise en charge du navigateur est bien meilleure maintenant:
- Chrome 6+
- Firefox 29+
- Opera 10.1+
- Safari 5+
- Bord
- (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 : "#" & "$" & "%"
//add e.altKey to prevent AltGr chars
else if ((e.shiftKey || e.altKey) && (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);" />Je me suis battu un peu avec celui-ci. 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 la vérification isNaN (). Pour les nombres uniquement positifs, vous pouvez modifier ces valeurs en 0 et même simplement supprimer le min = "1" de la balise d'entrée pour permettre les nombres négatifs.
De plus, cela fonctionne pour plusieurs boîtes (et pourrait vous faire gagner du temps de chargement en les faisant 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. NaN est renvoyé :-). En outre, W3 indique ici que la version globale de NaN dactylographiera le transtypage avant 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!
<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.
note: Pour une raison quelconque, cela ne fonctionne qu'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"
>
Prendre plaisir!
<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" />
Note : cross-browser et regex en littéral.
si vous pouvez utiliser HTML5, vous pouvez utiliser <input type="number" /> Sinon, vous devrez soit le faire par le biais de 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;
}
PS n’a pas testé le code, mais il devrait être plus ou moins correct s'il ne vérifiait pas les fautes de frappe: D Vous voudrez peut-être ajouter quelques éléments supplémentaires, comme quoi faire si la chaîne est nulle ou vide, etc. faire ceci plus rapidement: D
Ajoutez dans votre balise d’entrée: onkeyup = "value = value.replace (/ [^\d]/g, '')"
J'ai mis à jour certaines réponses postées pour ajouter les suivantes:
- Ajouter la méthode en tant que méthode d'extension
- Autoriser un seul point à entrer
Spécifiez le nombre de chiffres autorisés après le point décimal.
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; };
si pas entier mis à 0
<input type="text" id="min-value" />
$('#min-value').change(function ()
{
var checkvalue = $('#min-value').val();
if (checkvalue != parseInt(checkvalue))
$('#min-value').val(0);
});
S'il vous plaît voir mon projet du filtre multi-navigateur de la valeur de l'élément d'entrée de texte sur votre page Web en utilisant le langage JavaScript: Filtre de clé d'entrée . Vous pouvez filtrer la valeur sous forme de nombre entier, de nombre à virgule flottante ou écrire un filtre personnalisé, tel qu'un filtre de numéro de téléphone. Voir un exemple de code de saisie 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>Voir aussi ma page "Champ entier:" de l'exemple du filtre de clé d'entrée
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 la déclaration 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));
}
Commenterait le message original, mais ma réputation est trop basse pour le faire (je viens de créer ce compte).
Vous pouvez utiliser la balise <input> avec l'attribut type = 'numéro'.
Par exemple, vous pouvez utiliser <input type='number' />
Ce champ de saisie n'autorise que les valeurs numériques . Vous pouvez également spécifier la valeur minimale et la valeur maximale que ce champ doit accepter.
Que diriez-vous d'utiliser <input type="number"...>?
http://www.w3schools.com/tags/tag_input.asp
En outre, voici une question qui contient quelques exemples d'utilisation de Javascript pour la validation .
Mise à jour: lié à une meilleure question (merci alexblum).
J'ai utilisé une expression régulière pour remplacer la valeur d'entrée par le modèle requis.
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">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 chiffres 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)))" />
J'utilise cela 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>
À des fins générales, 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)"/>
http://www.texotela.co.uk/code/jquery/numeric/entrée numérique crédits à Leo Vũ pour avoir mentionné cela et bien sûr à TexoTela. avec une page de test.
Lorsque vous utilisez ce code, vous ne pouvez pas utiliser "Bouton BackSpace" dans Mozilla Firefox, vous ne pouvez utiliser que le retour arrière dans Chrome 47 && event.charCode <58; "pattern =" [0-9] {5} "requis>