Comment faire HTML balise input accepter uniquement des valeurs numériques?
J'ai besoin de faire en sorte qu'un certain <input>
champ ne prend numéros de la valeur.
L'entrée n'est pas partie d'un formulaire. Donc il n'est pas soumis, de sorte que la validation lors de la soumission n'est pas une option. Je veux que l'utilisateur ne puisse pas taper dans tous les caractères autres que des chiffres.
Est-il un moyen sympa pour y parvenir?
- stackoverflow.com/questions/469357/...
- Jetez un oeil à ce [lien][1], qui a assez d'info. [1]: stackoverflow.com/questions/469357/...
- Celui-ci peut également être utile: stackoverflow.com/questions/995183/...
- Double Possible de HTML de saisie de texte permet uniquement d'entrée numérique
Vous devez vous connecter pour publier un commentaire.
HTML 5
Vous pouvez utiliser HTML5 input type nombre à restreindre le nombre des entrées:
Cela fonctionnera uniquement en HTML5 plainte navigateur. Assurez-vous que votre document html est doctype est:
<!DOCTYPE html>
Voir aussi https://github.com/jonstipe/number-polyfill pour la transparence de support dans les navigateurs plus anciens.
JavaScript
Mise à jour: Il y a une nouvelle solution très simple pour cela:
Voir cette réponse ou essayez-le vous-même sur JSFiddle.
Pour usage général, vous pouvez avoir JS de validation ci-dessous:
Si vous souhaitez autoriser les décimales de remplacer la condition "if" avec ceci:
Source: HTML de saisie de texte permet uniquement d'entrée numérique
JSFiddle démo: http://jsfiddle.net/viralpatel/nSjy7/
php
& autres. Si le navigateur a javascript désactivé, cela ne fonctionne ! vous pouvez entrer n'importe quelle valeur defirebug
ou tout autres outils de développement.isNumberKey
fonction !!!var charCode = (evt.which) ? evt.which : evt.keyCode;
Vous pouvez également utiliser le modèle de l'attribut html5:
Validation de la saisie tutoriel
Bien que, si votre doctype n'est pas
html
alors je pense que vous aurez besoin d'utiliser un peu de javascript/jquery.S'il vous plaît essayez ce code avec le champ de saisie lui-même
cela fonctionnera 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'entrée
type="number"
balise est uniquement pris en charge dans les navigateurs les plus récents.Pour firefox, vous pouvez valider l'entrée à l'aide de javascript:
http://jsfiddle.net/VmtF5/
Mise à jour 2018-03-12: prise en charge du Navigateur est beaucoup mieux maintenant, il est pris en charge par le texte suivant:
parseFloat()
, qui permet supplémentaires chracters après le nombre, par exemple123kg
. Si vous vouliez que ont des numéros, vous pourriez voulez quelque chose comme ceci: jsfiddle.net/b72Qr à partir de stackoverflow.com/questions/1779013/...)onkeyup
se déclenche lorsque la touche est relâché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.remarque: Pour une raison quelconque, il ne fonctionne qu'avec
type="number"
Pour le rendre encore plus excitant, vous pouvez également avoir une limite:
Profitez-en!
J'ai combattu avec ce pour un peu. De nombreuses solutions d'ici et d'ailleurs semblait compliqué. Cette solution utilise jQuery/javascript aux côtés de HTML.
Dans mon cas, j'ai été suivi en petites quantités avec une valeur minimale de 1, d'où le min="1" dans la balise d'entrée et abc = 1 dans la fonction isNaN() vérifier. Pour le positif, seuls les chiffres vous pouvez modifier ces valeurs à 0 et même tout simplement de supprimer le min="1" de la balise d'entrée pour permettre aux nombres négatifs.
Aussi ce qui fonctionne pour de multiples boîtes (et peut vous faire économiser du temps de chargement de plus de faire individuellement par id), il suffit d'ajouter le "validateNumber" de la classe en cas de besoin.
Explication
parseInt() en fait, fait ce vous avez besoin, sauf qu'il renvoie NaN plutôt qu'à une valeur entière. Avec un simple if (), vous pouvez définir le "repli" de la valeur que vous préférez dans tous les cas, NaN est renvoyé :-).
Aussi W3 états ici que la version internationale de NaN seront de type cast avant de vérifier ce qui donne une certaine supplémentaire de vérification linguistique (en Nombre.isNaN() ne le fait pas).
Toutes les valeurs envoyées à un serveur/backend doit encore être validé il y!
JS:
HTML:
et dans le js:
ou vous pouvez l'écrire dans un complexe bu utile:
Note:croix-navigateur et de regex dans le sens littéral.
0.43
ou.43
) qui pourrait être fait avec la vérification de la valeur du courant d'entrée plus pressée. Ce serait laid dans une ligne de code, je vous recommande d'utiliser une fonction pour cela. Pour tester integer ou float, consultez here.si vous pouvez utiliser HTML5, vous pouvez faire
<input type="number" />
Si non, vous devrez le faire à l'aide de javascript comme vous l'avez dit il n'ya pas soumis à le faire à partir du code-behind.
P. S n'a pas tester le code, mais il devrait être plus ou moins correct si pas vérifier les fautes de frappe 😀
Vous pourriez veux ajouter un peu plus de choses comme quoi faire si la chaîne est null ou vide etc.
Vous pouvez également faire cette rapide 😀
J'ai utilisé l'expression régulière pour remplacer la valeur d'entrée avec le motif nécessaire.
JS:
HTML:
Rapide et Facile Code
Ceci va permettre l'utilisation de chiffres et de retour arrière seulement.
Si vous avez besoin de partie décimale trop, utilisez ce fragment de code
Comment sur l'utilisation de
<input type="number"...>
?http://www.w3schools.com/tags/tag_input.asp
Aussi, ici, est une question qui a quelques exemples de l'utilisation de Javascript pour la validation.
Mise à jour: liée à une meilleure question (merci alexblum).
si pas ensemble d'entiers 0
La accepté de répondre:
C'est bon, mais pas parfait. Cela fonctionne pour moi, mais je reçois un avertissement que le if peut être simplifiée.
Alors ça ressemble à ça, ce qui est nettement plus joli:
Aurait des commentaires au post original, mais ma réputation est trop faible pour le faire (viens de créer ce compte).
Vous pouvez utiliser le
<input>
balise avec l'attribut type= "numéro".Par exemple, vous pouvez utiliser
<input type='number' />
Ce champ de saisie permet uniquement des valeurs numériques.
Vous pouvez également spécifier la valeur minimale et la valeur maximale qui devrait être acceptée par ce domaine.
Veuillez 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 de l'entrée d'un nombre entier:
HTML:
Voir également ma page "Champ de type entier:" l'exemple de la clé d'entrée du filtre
Ajouter à l'intérieur de votre balise d'entrée: onkeyup="valeur=valeur.replace(/[^\d]/g,")"
J'ai mis à jour quelques réponses postées pour ajouter les éléments suivants:
Spécifier combien de chiffres après le point décimal est autorisé.
- Je l'utiliser pour les Codes postaux, rapide et facile.
Lors de l'utilisation de ce code, vous ne pouvez pas l'utiliser "retour arrière" dans Mozilla Firefox, vous pouvez uniquement utiliser la touche retour arrière en Chrome 47 && event.charCode < 58;" pattern="[0-9]{5}" required>
http://www.texotela.co.uk/code/jquery/numeric/ d'entrée numérique crédits à Leo Vũ de mentionner cela et bien sûr TexoTela. avec une page de test.
Pour usage général, vous pouvez avoir JS de validation ci-dessous:
Il va travailler pour le clavier Numérique et le nombre normal de la clé
Il est préférable d'ajouter un "+" pour REGEX condition pour accepter de multiples chiffres (pas seulement un chiffre):
<input type="text" name="your_field" pattern="[0-9]+">