Comment faire pour autoriser uniquement numériques (0-9) en HTML inputbox à l'aide de jQuery?
Je suis entrain de créer une page web où j'ai un champ de saisie de texte dans laquelle je veux autoriser uniquement des caractères numériques comme (0,1,2,3,4,5...9) 0-9.
Comment puis-je faire cela à l'aide de jQuery?
- Gardez à l'esprit que vous ne pouvez pas compter sur la validation côté client - vous avez également besoin de valider sur le serveur dans le cas où l'utilisateur a JavaScript désactivé, ou n'est pas à l'aide d'un navigateur compatible avec JavaScript.
- Vous pouvez également utiliser ce plugin jQuery, jQuery alphanumériques. Je l'ai trouvé vraiment génial.
- Ce (jQuery numérique plugin) on travaille bien et a quelques fonctionnalités intéressantes, mais vous pourriez avoir à ajuster un peu pour répondre à vos besoins et IE soutien.
- avez-vous considéré comme le html5? <input type="number" />. avec min et max attributs, vous pouvez restreindre l'entrée trop
- Vous pouvez utiliser javascript, mais vous devez garder à l'esprit le javascript supplémentaire du coup sur la performance du processeur d'un mauvais téléphone. J'ai eu ce problème et résolu avec un <select> Car vous avez juste besoin 0-9? Il n'est pas fou pour utiliser un select menu déroulant pour que.
- Je pense que vous devriez vérifier pour les valeurs d'entrée sur l'événement keyup et pas vérifier les codes de touche, car il est beaucoup plus fiable, par delà les différences dans les claviers et ce n'est pas.
- Reportez-vous de ma réponse, stackoverflow.com/questions/995183/...
- Je suis entièrement d'accord avec Richard: ne pas utiliser les codes de touches. La accepté de répondre ne fonctionne pas sur les claviers français, par exemple, puisque vous devez appuyer sur "Shift" pour taper des chiffres sur ces claviers. Les codes de touches sont tout simplement trop risqué, à mon humble avis.
- Ne fonctionne pas avec les versions actuelles d'internet explorer. C'est bien beau d'utiliser la dernière version du code sur vos propres trucs à garder au frais, mais ce n'est pas vraiment une option pour presque n'importe quel projet professionnel. caniuse.com/#feat=input-number
- Êtes-vous sûr que vous avez besoin de jQuery pour cela? Vous pouvez utiliser le HTML5 modèle attribut sur une entrée de restreindre uniquement des nombres comme
<input pattern="[0-9]+" />
. Je préfère cette méthode car la plupart des navigateurs modifier le style du champ de saisie lors de la<input type="number" />
- double possible de jQuery: quelle est la meilleure façon de limiter "le nombre"seule entrée pour les zones de texte? (laissez les décimales)
- Javascript étant on/off n'est pas pertinent. Vous devez toujours vérifier sur le serveur.
- pouvez-vous expliquer ce qu'est exactement ne fonctionne pas pour vous?
- J'ai essayé le code inclus snipet dans l'acceptation de réponse et comme indiqué dans th boutny, j'ai encore réussi à entrer des caractères spéciaux qui ne sont pas numériques. Aussi, quand j'ai essayer d'appuyer sur maj + un certain nombre (au-dessus des lettres) rien ne se passe dans l'entrée.
- Le navigateur[+version]/os? Avez-vous saisi le char ou avez-vous utilisez ctrl+v?
- dernière version de google chrome, mais j'ai eu le même problème avec MS Bord, pas de collage impliqués. Juste à l'entrée régulière sur le clavier.
- J'ai en bas voté cette question, parce que vous nous demandez d'écrire du code pour vous. Qu'avez-vous essayé?
- Qui n'a pas de limiter ce que vous tapez seulement les chiffres, vous pouvez cliquer en haut et en bas pour.
Vous devez vous connecter pour publier un commentaire.
Remarque: C'est une mise à jour de réponse. Les commentaires ci-dessous font référence à une ancienne version qui foiré autour avec les codes de touches.
jQuery
La
inputFilter
plugin ci-dessous vous permet d'utiliser tout sorte de filtre d'entrée sur un texte<input>
, y compris les divers filtres numériques. Cela permettra de gérer correctement:Essayer vous-même sur JSFiddle.
Certains filtres d'entrée, vous pouvez utiliser:
/^\d*$/.test(value)
/^\d*$/.test(value) && (value === "" || parseInt(value) <= 500)
/^-?\d*$/.test(value)
.
et,
comme séparateur décimal):/^-?\d*[.,]?\d*$/.test(value)
/^-?\d*[.,]?\d{0,2}$/.test(value)
/^[a-z]*$/i.test(value)
/^[a-z\u00c0-\u024f]*$/i.test(value)
/^[0-9a-f]*$/i.test(value)
Note que vous avez toujours doit faire côté serveur de validation!
Pur JavaScript (sans jQuery)
jQuery n'est pas réellement nécessaire pour cela, vous pouvez faire la même chose avec JavaScript ainsi. Voir cette réponse ou essayez-le vous-même sur JSFiddle.
HTML 5
HTML 5 a une solution native avec
<input type="number">
(voir la spécification), mais notez que la prise en charge du navigateur varie:step
,min
etmax
attributs.e
etE
dans le domaine. Voir aussi cette question.Essayer vous-même sur w3schools.com.
keypress
gestionnaire d'événements. Par exemple:$('#nummer').keypress(function (event) { console.log('keypress: ' + event.which); if (!isNumber(event.which)) { event.preventDefault(); } }); function isNumber(characterCode) { var isNumber = false; if (characterCode >= 48 && characterCode <= 57) { isNumber = true; } return isNumber; }
event.keyCode == 40
Jusqu'boutonVoici la fonction que j'utilise:
Ensuite, vous pouvez l'attacher à votre contrôle en faisant:
return this.each(function()
?each
dereturn this.each(function()
est de permettre à de multiples objets comme HaggleLad dit, et lareturn
partie est le retour de l'objet jQuery retour à l'appelant, pour permettre le chaînage comme$("input[type='text'").ForceNumericOnly().show()
key == 13 ||
pour s'assurer Entrée est autorisée, pour la forme submital et cesEn ligne:
HTML:
Discrète style (avec jQuery):
JS:
HTML:
onkeyup="if (/\D/g.test(this.value)) this.value = this.value.replace(/\D/g,'')"
.onkeyup="if (/^-?\d*$/.test(this.value)){ this.oldValue = this.value; } else { this.value = this.oldValue || ''; }"
./[^0-9]|^0+(?!$)/g
pour éviter principaux de la série de zéro.onkeyup="if (isNaN(parseFloat(this.value))) { this.value = this.oldValue || ''; } else { this.oldValue = this.value; }"
.decimal
entre0.0
à24.0
je suis incapable de le laisser entrer dans la.
Vous pouvez simplement utiliser un JavaScript simple expression régulière pour tester uniquement des caractères numériques:
Cela renvoie vrai si l'entrée est numérique ou false sinon.
ou pour l'événement de mot de code, simple d'utilisation ci-dessous :
Vous pouvez utiliser sur l'entrée de l'événement comme ceci:
Mais, qu'est-ce code privilège?
....
et----
decimal
entre0.0
à24.0
je suis incapable de le laisser entrer dans la.
this.value = Number(this.value.replace(/\D/g, ''));
Court et doux, même si ce ne sera jamais le trouver beaucoup d'attention après 30+ réponses 😉
Utiliser la fonction JavaScript isNaN,
if (isNaN(document.getElementById ("inputid').val()))Mise à jour:
Et voici un bel article qui parle de ça, mais à l'aide de jQuery: La restriction de l'Entrée dans les zones de texte HTML à des Valeurs Numériques
document.getElementById('inputid').val()
mec.. c'est encore jquery..val()
est un jquery chose. utilisation.value
isNaN
seul est une mauvaise idée, car de JavaScript de contrainte de type.decimal
entre0.0
à24.0
je suis incapable de le laisser entrer dans la.
Source: http://snipt.net/GerryEng/jquery-making-textfield-only-accept-numeric-values
- Je l'utiliser dans notre commune fichier js. Je viens d'ajouter la classe à n'importe quelle entrée qui a besoin de ce comportement.
Plus simple pour moi est
this.value.replace(/[^0-9\.]/g,'');
d'inclure des OP exigences de 0 à 9Pourquoi faire si compliqué? Vous n'avez même pas besoin de jQuery car il y a un HTML5 modèle attribut:
Le truc cool, c'est qu'il apporte un clavier numérique sur les appareils mobiles, ce qui est nettement mieux que d'utiliser jQuery.
Vous pouvez faire de même en utilisant cette solution très simple
JS:
HTML:
J'ai évoqué ce lien pour la solution. Il fonctionne parfaitement!!!
decimal
entre0.0
à24.0
je suis incapable de le laisser entrer dans la.
Le modèle de l'attribut HTML5 spécifie une expression régulière que la valeur de l'élément est vérifié contre.
Remarque: Le modèle de l'attribut fonctionne de la manière suivante types: texte, recherche, url, tel, email, mot de passe.
[0-9] peut être remplacé par toute expression régulière condition.
{1,3}, il représente un minimum de 1 et un maximum de 3 chiffres peuvent être saisis.
decimal
entre0.0
à24.0
je suis incapable de le laisser entrer dans la.
Vous pouvez essayer le HTML5 nombre d'entrée:
Pour les non-conforme navigateurs il y a Modernizr et Webforms2 de base.
Quelque chose assez simple en utilisant l' jQuery.valider
fonction suppressNonNumericInput(event){
decimal
entre0.0
à24.0
je suis incapable de le laisser entrer dans la.
Je suis venu à une très bonne solution et simple qui n'empêche pas l'utilisateur de sélectionner du texte ou de le copier-coller d'autres solutions. jQuery style 🙂
Vous pouvez utiliser cette fonction JavaScript:
Et vous pouvez le lier à votre zone de texte comme ceci:
- Je utiliser dans la production, et il fonctionne parfaitement, et il est cross-browser. En outre, il ne dépend pas de jQuery, de sorte que vous pouvez lier à votre zone de texte avec le JavaScript en ligne:
Je pense que ça va aider tout le monde
if(event.which!=8 && event.which!=0 && (event.which<48 || event.which>57) && (event.which<96 || event.which>105)) return;
J'ai écrit le mien basé sur @user261922 du post ci-dessus, légèrement modifiée, de sorte que vous pouvez sélectionner tous les, onglet et peut gérer de multiples "numéro" les champs sur la même page.
Ici est une solution rapide, j'ai créé il y a quelques temps. vous pouvez en lire plus à ce sujet dans mon article:
http://ajax911.com/numbers-numeric-field-jquery/
Ici est une réponse qui utilise jQuery UI Widget de l'usine. Vous pouvez personnaliser les caractères autorisés facilement.
Qui permettrait de nombres, de signes et les montants en dollars.
Cela semble incassable.
Je voulais aider un peu, et j'ai fait ma version, la
onlyNumbers
fonction...Juste ajouter dans la balise input "...d'entrée ... id="prix" onkeydown="return onlyNumbers(event)"..." et c'est fait 😉
Je tiens également à répondre 🙂
Que c'est...juste des numéros. 🙂 Presque il peut travailler seulement avec le "flou", mais...
Vous souhaitez autoriser l'onglet:
Manière Simple de vérifier que d'entrer la valeur est numérique est:
Suffit d'appliquer cette méthode en Jquery et vous pouvez valider votre zone de texte à accepter nombre seulement.
D'essayer cette solution ici
Vous pouvez essayer le HTML5 nombre d'entrée:
Cette balise input élément devrait avoir qu'une valeur entre 0 à 9
comme min attribut est défini sur 0 et max attribut est fixé à 9.
pour plus d'informations sur la visite http://www.w3schools.com/html/html_form_input_types.asp
Devez vous assurer que vous avez le pavé numérique et la touche tab de travail trop
Il y a une incroyable problème de compatibilité avec l'aide des touches de détecter le caractère pressé... voir quirksmode pour en savoir plus à ce sujet.
Je conseille keyup pour créer un filtre parce que vous avez l' $(element).val() la méthode à utiliser pour évaluer l'effectif de caractères universels.
Ensuite, vous pouvez filtrer les NON des caractères à l'aide d'une expression régulière comme:
replace(/[^0-9]/g,");
Ce prend soin de toutes les questions, comme maj et coller des problèmes car il y a toujours un keyup et donc la valeur sera toujours évalué (sauf si javascript est désactivé).
Donc... en JQuery... Ici, c'est un peu inachevé plugin que je suis en train d'écrire, il est appelé masquesaisie (inputmask) et permettra de soutenir plus de masques lorsque vous avez terminé. Pour l'instant, on a les chiffres masque de travail.
Ici, il va...
Pour l'utiliser, il suffit de ne:
Le "someOtherNotYetImplementedValidator" est juste là pour montrer comment cela peut être élargi pour plus de futurs masques/validateurs. Vous pouvez ajouter ou à laisser, cela n'est pas rien casser 😉
Appologies pour le supplément de l'encombrement de commentaires, je suis en utilisant un modèle que j'ai créé pour les gars ici à l'œuvre.
Espère que cette aide,
Cheers
onkeyup="this.value=this.value.replace(/\D/g,'')"
.$("#inputfield").keypress(function(e) { if (e.which < 48 || e.which > 57) e.preventDefault(); });
if (/\D/g.test(this.value)) this.value = this.value.replace(/\D/g,'')
de sorte que la valeur n'est changé (et le curseur passe à la fin) si il y a un caractère non valide. De cette façon, vous pouvez toujours utiliser les touches fléchées. Vous pouvez aussi entrer des chiffres dans le milieu sans le curseur de déplacement.À dire un peu plus sur la réponse #3 je ferais les suivantes (REMARQUE: ne prend pas en charge coller des oprations via le clavier ou la souris):
C'est pourquoi j'ai écrit récemment pour accomplir cette tâche. Je sais que cela a déjà été répondu, mais je vais la laisser pour plus tard utilise.
Cette méthode permet uniquement de 0 à 9 du clavier ou du pavé numérique, correction arrière, onglet, les flèches gauche et droite (forme normale des opérations)
J'ai eu un problème avec les haut-réponse. Il ne comprend pas le pavé numérique et si l'on appuie sur la touche shift+numéro spécial avec les signes ne devraient pas être affichées soit.. mais cette solution ne prend pas soin d'elle.
Le meilleur lien que j'ai trouvé dans ce fil, c'était ça:
http://www.west-wind.com/weblog/posts/2011/Apr/22/Restricting-Input-in-HTML-Textboxes-to-Numeric-Values
Je suis nouveau sur stackoverflow, donc je ne sais pas si je peux juste modifier la meilleure solution dans le haut-post.
Si vous avez à résoudre des signes diacritiques et des caractères spéciaux, essayez d'utiliser ceci:
Voici la façon avec expression régulière:
});
https://jsfiddle.net/astrapi69/qbk2vjty/1/
Et vous pouvez modifier l'expression régulière à autre chose si vous voulez restreindre l'accès d'autres caractères, puis des numéros.
Mise à jour de la solution pour une meilleure expérience utilisateur, qui traite de la copier+coller question et remplace le mot de code obsolète attribut:
Détails:
Tout d'abord, types d'entrée:
number
montre les flèches haut/bas rétrécissement de l'entrée effective de l'espace, je les trouve moches et ne sont utiles que si le nombre représente une quantité, à une (des choses comme les téléphones, les codes, Id... n'en avez pas besoin)tel
offre les mêmes navigateur validations de nombre sans flèchesÀ l'aide de [nombre /tél] permet également de montrer clavier numérique sur les appareils mobiles.
Pour le JS de validation j'ai fini par avoir besoin de 2 fonctions, une pour l'utilisateur normal d'entrée (pression de touche) et l'autre pour un copier+coller fix (changement), d'autres combinaisons, il me donnerait une terrible expérience de l'utilisateur.
- Je utiliser le plus fiable KeyboardEvent.clé au lieu de la maintenant obsolète KeyboardEvent.charCode
Et en fonction de votre navigateur, vous pouvez envisager d'utiliser Tableau.le prototype.comprend() au lieu de la mal nommée Tableau.le prototype.indexOf() (pour de vrai /faux résultats)
l'essayer dans le code html de soi comme onkeypress et onpast
Il est peut-être exagéré pour ce que vous cherchez, mais je suggère un plugin jQuery appelé autoNumeric() - c'est génial!
Vous pouvez limiter aux seuls chiffres, la précision décimale, valeurs max /min et plus.
http://www.decorplanit.com/plugin/
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:
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 permettent uniquement d'entrée Numérique
JSFiddle démo: http://jsfiddle.net/Gagan_Gami/nSjy7/333/
Beaucoup de gens sont à l'aide de keycode propriété qui n'est pas facile à retenir. Si vous ne disposez pas d'un jeu de paramètres régionaux questions, alors vous pouvez simplement utiliser clé qui est en fait l'entrée de l'utilisateur types.
Voir ce Violon
JS:
HTML:
question est alors de voir la suite de code simple.
Veuillez noter que cet exemple contient également de validation pour les décimales entrée.
Que par cette question, il n'est pas nécessaire, de sorte que vous pouvez simplement supprimer le cas "." pour supprimer l'entrée de décimales.
Cette jQuery code de filtrer les caractères tapés tout Maj, Ctrl ou Alt est enfoncée.
Vous pouvez utiliser la validation HTML5 sur votre texte entrées par l'ajout d'un motif. Pas besoin de valider manuellement avec la regex ou les codes de touches.
Possible, mais pas aussi simple pour les entrées [type=numéro]...
Le problème avec [type="nombre"] est que nous ne pouvons pas supprimer le caractère non valide à la fin. Les Agents d'Utilisateur retourne une chaîne vide à chaque fois que l'entrée est invalide.
Du W3C HTML5 spec:
https://dev.w3.org/html5/spec-LC/number-state.html#number-state
Cela signifie que nous avons besoin d'un moyen de stocker de l'entrée précédente de la valeur à la main.
Donc, pour nombre d'entrées, la solution devrait ressembler à ceci:
Malheureusement, cela ne fonctionne pas sur IE et EDGE. Nous avons besoin de recourir au modèle de la solution ci-dessus pour ces navigateurs. Cependant, vous pouvez toujours utiliser ce numéro entrées avec cette simple polyfill.
Ci-dessus $ plugin est écrit à partir de la AjaxControlToolkit filtre de zone de texte extender.js.
Cependant un comportement n'est pas emprunté à la AjaxControlToolkit est que lorsque l'utilisateur copie et colle tout non-valeur numérique puis l'événement onchange des incendies et de la zone de texte mange les valeurs. Je suis allé dans le code et trouvé pour cette onchange a été appelé d'après toutes les 250ms, ce qui est un gain de performance, d'où commenté la partie.
ajouter le code ci-dessous dans le document.prêt
Je vous recommandons de vérifier événement.metaKey ainsi. Si défini à true, l'utilisateur peut être faire quelque chose comme cmd-A pour sélectionner tout le texte dans le champ. Vous devrait permettre que trop.
Je suis en utilisant ce formulaire. Semble correct pour me permettre de touches accueil, fin, maj et ctrl, avec l'inconvénient de l'utilisateur peut imprimer des caractères spéciaux:
Une autre approche est ci-dessous. Cela va prendre soin de coller aussi. [c'est pour l'alpha-numérique de validation]
Vérifier si le point décimal déjà utilisé:-
Cette réponse était parfait, mais nous pouvons encore l'améliorer et le rendre plus puissant, en la combinant avec la jQuery.La Validation du plugin.
À l'aide de la nombre() la méthode, nous pouvons développer quelque chose comme ceci:
Donc, une zone de texte dans la "#myFormId", avec "numberOnly" classe, accepter seulement le nombre, y compris décimal, float, et le même nombre négatif. Voila 🙂
PS: Dans mon cas, pour une raison que j'ai utilisé jQuery.programme de validation.addMethod() au lieu de .valider():
(il fonctionne très bien à l'intérieur de mon ASP.NET MVC 3 projet + JavaScript discret de validation, hooooooooray!)
Remaniée de la accepté de répondre afin que les commentaires ne doivent plus utilisé parce que je déteste les commentaires. Aussi c'est plus facile à tester avec le jasmin.
Utiliser en dessous de jQuery simple pour permettre uniquement des caractères numériques dans un tetbox. Vous n'avez pas besoin de filtrer tous les caractères spéciaux manuellement, donc il n'y a pas de danger de manquer certains char spécial. Cela permettra uniquement des chiffres de 0 à 9: (Placer le code ci-dessous dans le document de prêt et de changer le nom de la classe à votre numérique des champs de texte nom de la classe.)
J'ai combiné les réponses de l'un et de venir avec le code suivant:
En outre, la forme devrait avoir
autocomplete="off"
. Sans cette option, vous pourriez avoir des problèmes avec l'auto-complétion des algorithmes sur des appareils mobiles.mettre une classe dans l'entrée de texte et le nom, il only_numbers
mettre le code jquery dans la page
avoir du plaisir 🙂
Essayer celui-ci
C'est ce que j'utilise pour valider le nombre d'entrées pour integer ou float (valeurs discrètes de style avec jQuery):
JS:
HTML:
Aucune réponse n'a fonctionné dans mon cas, j'ai donc fait un peu de changement dans la accepté de répondre à la faire fonctionner pour Dynamiquement ajouté des éléments.
Profiter :
Utilisation :
Utiliser le jquery valeur numérique. En dessous de fonction permet pour les décimales et les valeurs numériques.
Exemple:
$("#inputId").numérique({ allow: "." });
Il y a tellement de bonnes réponses à de le faire avec java Script jQuery ici.
Je vais ajouter un moyen très facile pour l'archivage de ce juste à l'aide de HTML5.
J'espère que cela fonctionnera sur tous les navigateurs.