Meilleur moyen de restreindre un champ de texte aux seuls chiffres ?

Question

Meilleur moyen de restreindre un champ de texte aux seuls chiffres ?

Demandé el 21 de Septembre, 2010: Quand la question a-t-elle été
60959 affichage: Nombre de visites la question a
5 Réponses: Nombre de réponses aux questions
Ouvert: Situation réelle de la question

J'utilise le Javascript suivant pour restreindre un champ de texte sur mon site Web afin qu'il n'accepte que les entrées numériques, et aucune autre lettre ou caractère. Le problème, c'est qu'il rejette VRAIMENT toutes les autres saisies, telles que ctrl - A pour sélectionner le texte, ou même toute autre fonction du navigateur comme ctrl - T ou ctrl - W lorsque la zone de texte est sélectionnée. Quelqu'un connaît-il un meilleur script pour n'autoriser que la saisie numérique, mais ne pas bloquer les commandes normales (qui ne sont pas saisies directement dans le champ) ? Merci Voici le code que j'utilise actuellement :

function numbersonly(e, decimal) 
{
    var key;
    var keychar;

    if (window.event) 
        key = window.event.keyCode;
    else if (e) 
        key = e.which;
    else 
        return true;

    keychar = String.fromCharCode(key);

    if ((key==null) || (key==0) || (key==8) ||  (key==9) || (key==13) || (key==27))
       return true;     
    else if ((("0123456789").indexOf(keychar) > -1))
       return true;
    else if (decimal && (keychar == "."))
       return true;        
    else
       return false;
}

Edit : Aucune des solutions proposées n'a résolu mon problème d'autoriser des commandes comme ctrl - A lorsque la zone de texte est sélectionnée. C'était le but de ma demande ici, donc je suis revenu à l'utilisation de mon script original. Mais bon.

Demandé el 21 de Septembre, 2010 par RobHardgood

3 votes

Si vous vous contentez d'utiliser le HTML 5, imparfaitement mis en œuvre, le type de formulaire <input type="number" /> qui peuvent fonctionner.

Commenté el 22 de Septembre, 2010 par David Thomas

0 votes

J'aurais aimé pouvoir utiliser HTML 5. C'est ce que j'ai pensé en premier, et ça m'aurait évité de perdre du temps à chercher du javascript :-p Merci quand même.

Commenté el 22 de Septembre, 2010 par RobHardgood

0 votes

Duplicata possible de La saisie de texte HTML n'autorise que la saisie numérique

Commenté el 2 de Décembre, 2016 par Pineda

Answer 1

5 Réponses

Answer 2

36voto

Robert Points 12091

C'est quelque chose que j'ai fait une autre fois pour les chiffres seulement, il permettra à tous les formateurs aussi.

jQuery

$('input').keypress(function(e) {
    var a = [];
    var k = e.which;

    for (i = 48; i < 58; i++)
        a.push(i);

    if (!(a.indexOf(k)>=0))
        e.preventDefault();
});

Essayez-le.

http://jsfiddle.net/zpg8k/

À noter que vous voudrez également filtrer du côté de l'envoi/du serveur, pour des raisons de collage/menu contextuel et pour les navigateurs qui ne prennent pas en charge l'événement coller.

Modifier pour développer les méthodes multiples

Je vois que vous rebondissez sur la réponse "acceptée", alors je vais clarifier quelque chose. Vous pouvez vraiment utiliser n'importe laquelle des méthodes listées ici, elles fonctionnent toutes. Ce que je ferais personnellement, c'est d'utiliser la mienne pour le filtrage en direct côté client, puis d'utiliser RegEx côté soumission et côté serveur, comme suggéré par d'autres. Cependant, aucun côté client ne sera efficace à 100 % en soi car rien ne m'empêche de mettre document.getElementById('theInput').value = 'Hey, letters.'; dans la console et en contournant toute vérification côté client (à l'exception de l'interrogation, mais je pourrais simplement annuler l'interrogation). setInterval de la console également). Utilisez la solution côté client que vous voulez, mais assurez-vous de mettre en œuvre quelque chose côté serveur et côté soumission.

Edit 2 - @Tim Down

D'accord, selon les commentaires, j'ai dû ajuster deux choses auxquelles je n'avais pas pensé. D'abord, keypress au lieu de keydown, qui a été mis à jour, mais l'absence d'indexOf dans IE (sérieusement Microsoft !?) casse également l'exemple ci-dessus. Voici une alternative

$('input').keypress(function(e) {
    var a = [];
    var k = e.which;

    for (i = 48; i < 58; i++)
        a.push(i);

    if (!($.inArray(k,a)>=0))
        e.preventDefault();
});

Nouveau jsfiddle : http://jsfiddle.net/umNuB/

Répondu el 21 de Septembre, 2010 par Robert (12091 Points )

0 votes

Hmm, je ne suis pas sûr que ça va marcher pour moi. Il semble toujours autoriser les lettres si vous maintenez la touche enfoncée. Je veux empêcher complètement les lettres, de sorte qu'une erreur de validation du formulaire soit le dernier recours.

Commenté el 22 de Septembre, 2010 par RobHardgood

0 votes

Il n'autorise pas les lettres pour moi. Comme je l'ai dit, c'est quelque chose que j'ai construit avant qui avait aussi des lettres, mais j'ai supprimé cette partie, assurez-vous que vous regardez le bon jsfiddle.

Commenté el 22 de Septembre, 2010 par Robert

0 votes

Il permet parce que quelqu'un déconne avec son jsfiddle. Collez son javascript et vous obtenez ce que vous voulez.

Commenté el 22 de Septembre, 2010 par sod

Afficher 18 autres commentaires

Answer 3

20voto

Hamund Points 161

Cela fonctionne dans IE, Chrome ET Firefox :

<input type="text" onkeypress="return event.charCode === 0 || /\d/.test(String.fromCharCode(event.charCode));" />

Répondu el 12 de Mars, 2014 par Hamund (161 Points )

2 votes

C'est fantastique, bien qu'il faille expliquer un peu ce qui se passe.

Commenté el 24 de Juin, 2014 par Casey

2 votes

Vérifier le caractère NULL puis tester sur le chiffre regex "/". \d /"

Commenté el 29 de Juin, 2014 par Utilisateur non enregistré

0 votes

Comment inclure le signe négatif dans ce cas ?

Commenté el 21 de Janvier, 2017 par ananth reddy

Afficher 1 autres commentaires

Answer 4

17voto

ialpert Points 301

     .keypress(function(e)
               {
                 var key_codes = [48, 49, 50, 51, 52, 53, 54, 55, 56, 57, 0, 8];

                 if (!($.inArray(e.which, key_codes) >= 0)) {
                   e.preventDefault();
                 }
               });

Vous avez aussi besoin des touches Backspace et Delete ;)

Répondu el 15 de Avril, 2011 par ialpert (301 Points )

2 votes

Je suis étonné qu'il ne soit pas inclus dans la première réponse. Peut-être une modification est-elle nécessaire ?

Commenté el 25 de Mars, 2013 par th3byrdm4n

0 votes

C'était la seule solution qui fonctionne sur toutes les plateformes. Merci d'être géniaux !

Commenté el 20 de Mai, 2015 par CoppolaEmilio

0 votes

.on('keypress', function (event) { var _element = $(this), keyCode = event.keyCode || event.which, keysAllowed = [44, 46, 48, 49, 50, 51, 52, 53, 54, 55, 56, 57, 0, 8, 9, 13]; if ($.inArray(keyCode, keysAllowed) === -1 && event.ctrlKey === false) { event.preventDefault(); } }); il ajoute aussi la tabulation et l'entrée et surveille la combinaison ctrl.

Commenté el 4 de Août, 2015 par Arkadiusz Rosłaniec

Answer 5

12voto

dogbane Points 85749

http://jsfiddle.net/PgHFp/

<html>
<head>
<title>Test</title>
<script language="javascript">
function checkInput(ob) {
  var invalidChars = /[^0-9]/gi
  if(invalidChars.test(ob.value)) {
            ob.value = ob.value.replace(invalidChars,"");
      }
}
</script>
</head>

<body>
    <input type="text" onkeyup="checkInput(this)"/>
</body>
</html>

Répondu el 21 de Septembre, 2010 par dogbane (85749 Points )

0 votes

Cela fonctionne aussi très bien ! Merci @fahd il empêche même de coller du texte

Commenté el 22 de Septembre, 2010 par RobHardgood

0 votes

Gardez à l'esprit que cela n'empêchera pas de faire glisser du texte dans la zone de texte, d'où la nécessité d'une vérification onsubmit et côté serveur.

Commenté el 22 de Septembre, 2010 par Robert

0 votes

@Robert En effet, j'ai toujours une validation de formulaire PHP au cas où les utilisateurs ont désactivé javascript de toute façon.

Commenté el 22 de Septembre, 2010 par RobHardgood

Afficher 2 autres commentaires

Answer 6

5voto

Andrew Dunn Points 7465

Il suffit d'utiliser une expression rationnelle pour se débarrasser de tout caractère non numérique lorsqu'une touche est enfoncée ou que la zone de texte perd le focus.

var numInput;
window.onload = function () {   
    numInput = document.getElementById('numonly');
    numInput.onkeydown = numInput.onblur = numInput.onkeyup = function()
    {
        numInput.value = numInput.value.replace(/[^0-9]+/,"");
    }
}

Répondu el 21 de Septembre, 2010 par Andrew Dunn (7465 Points )

Meilleur moyen de restreindre un champ de texte aux seuls chiffres ?

Réponses

jQuery

Essayez-le.

Modifier pour développer les méthodes multiples

Edit 2 - @Tim Down

Questions en vedette

Top Tags

Prograide.com

Powered by:

Meilleur moyen de restreindre un champ de texte aux seuls chiffres ?

Réponses

jQuery

Essayez-le.

Modifier pour développer les méthodes multiples

Edit 2 - @Tim Down

Questions connexes

Questions en vedette

Top Tags

Dans notre réseau

Prograide.com

Powered by: