Comment empêcher l'utilisateur d'entrer des décimales?

J'ai une page sur mon site. L'ordre des éléments peut avoir décimal quantités, certains ne peuvent pas.

Quelle est la meilleure façon de prévenir l'utilisateur de passer en décimal quantités? (En dehors d'une boîte d'alerte et définissant le champ à zéro)?

Ce n'est pas un JavaScript/HTML réponse.
oups, oui retiré commentaire
Pour être clair: si nous vérifier ces choses en Javascript pour une belle expérience de l'utilisateur, il va pas empêcher les utilisateurs avec le Javascript désactivé à partir de la saisie de ces valeurs, de toute façon. Cela ne devrait pas être votre dernière ligne de défense, et il doit y avoir une validation côté serveur, trop. (Je parie que vous savez cela, mais les futurs lecteurs ne peuvent pas.)
Comment êtes-vous actuellement en arrêt utilisateurs d'entrer des données non numériques? (Ça sonne un peu comme vous êtes en supposant qu'ils vont entrer un numéro, mais vous voulez juste pour éviter les décimales dans certains domaines.)

OriginalL'auteur hawkeye | 2011-09-02

  1. 14

    Intercepter les événements clés pour le domaine, de détecter des caractères sur l'entrée, les empêcher de se entré dans le champ et ajouter une temporaire msg près du champ (inséré dans la page), qui explique ce que les personnages ou les valeurs sont autorisés. alertes pop-up sont une bonne façon de donner de la rétroaction au moyen de la saisie.

    Puis, valider à nouveau avant de soumission, car il existe d'autres moyens pour obtenir des données dans les champs (glisser/déposer, copier/coller, etc...) que vous pourriez ne pas avoir pris de tout.

    Voici un jQuery exemple d'un entier et décimal seul champ temporaire messages affichés lorsque les clés non valides sont tapées:

    De travail jsFiddle: http://jsfiddle.net/jfriend00/CkDTy/

    $(".integer").keypress(function(e) {
    if (e.which < 48 || e.which > 57) {
        showAdvice(this, "Integer values only");
        return(false);
    }
});

$(".decimal").keypress(function(e) {
    //46 is a period
    if (e.which != 46 && (e.which < 48 || e.which > 57)) {
        showAdvice(this, "Decimal numbers only");
        return(false);
    }
    if (e.which == 46 && this.value.indexOf(".") != -1) {
        showAdvice(this, "Only one period allowed in decimal numbers");
        return(false);   //only one decimal allowed
    }
});

function showAdvice(obj, msg) {
    $("#singleAdvice").stop(true, false).remove();
    $('<span id="singleAdvice" class="advice">' + msg + '</span>').insertAfter(obj);
    $("#singleAdvice").delay(4000).fadeOut(1500);
}
    +1 pour se souvenir de la non-frappe de méthodes de saisie.
    Cela ne prend pas en charge l'aide des touches fléchées ou la touche retour arrière.
    Je ne suis pas sûr de ce que tu veux dire. Les flèches et la touche retour arrière ne génère pas d'événements de pression de touche, de sorte qu'ils ne sont pas bloqués par cette solution et ne causent pas un problème non plus.
    Sans doute intéressant de noter que c'est un jQuery solution et non pas de la pure JS.

    OriginalL'auteur jfriend00

  2. 0

    Voici un peu de jQuery qui empêche les non-entrées numériques:

    $(function() {
    $('input').bind('keyup', function(event) {
        var currValue = $(this).val();

        if(currValue.search(/[^0-9]/) != -1)
        {
            //Change this to something less obnoxious
            alert('Only numerical inputs please');
        }

        $(this).val(currValue.replace(/[^0-9]/, ''));
    });
});

    OriginalL'auteur attack

  3. -1

    Vous pouvez ajouter un événement (sur les clés de la presse) et de détecter si un point décimal a été pressé par l'utilisateur ou non. Également sur le formulaire de soumission, d'utiliser des expressions régulières pour vérifier si les données fournies sont correctes (parce que l'utilisateur peut falsifier les données à l'aide d'éditeur live comme firebug). Assurez-vous également de vérifier que votre serveur de côté dans le cas où si l'utilisateur a désactivé javascript.

    par exemple:

    <input type="text" onkeypress="checkDecimal();" />
<input type="submit" onclick="checkBeforeSubmit();" />

function checkDecimal() {
    //your code goes here
}

function checkBeforeSubmit() {
    //your code goes here
}

    Vous mieux utiliser la même fonction, parce que c'est fondamentalement la même chose et appeler des deux événements.

    Sur le côté serveur, vérifier les données soumises de nouveau

    OriginalL'auteur K''