Limitation des caractères Javascript - des caractères non valides apparaissent temporairement

Question

J'utilise le Javascript pour limiter les caractères des différents champs de saisie de texte comme une forme de validation côté client, ainsi que l'amélioration de la facilité d'utilisation. J'utilise le code suivant pour faire ceci:

function validNumbers(caller) {
    var exp = /^[\d.]+/g;
    var str = '';
    if (caller.value.match(exp)) {
        str = caller.value.match(exp).toString();
    } else {
        str = '';
    }
    str = str.replace(/\D/g,'');
    caller.value = str;
}

J'appelle cette fonction avec onkeypress = "validNumbers (this);" et, pour la plupart, cela fonctionne comme un charme. Le problème est que, quand je tape un caractère non valide dans le champ, la valeur du champ semble se mis à jour (du point de vue du Javascript) mais le personnage reste jusqu'à ce que j'appuyez sur la touche suivante, à quel point il est remplacée par la valeur de la clé suivante visuellement, même si la clé suivante est invalide aussi bien. L'effet recherché est que, lorsqu'une clé non valide est activée, la valeur non valide ne montre même pas visuellement. Comment puis-je y parvenir?

Edit: J'ai choisi la réponse ci-dessous, car il m'a fait sur la bonne voie. Je ne dois faire que d'ajouter e.shiftKey à ma liste d'événements exclus afin d'éviter que des personnages comme « ! @ # $% ^ & * () _ + », Mais ce ne fut pas un problème pour moi de savoir moi-même.

Answer 1

Dans votre fonction nettoyons la valeur après qu'il a été entré dans le champ de texte et évalué. , Vous avez besoin au lieu de l'empêcher d'être entré dans le champ de texte tout à fait. Pour ce faire, vous voulez utiliser la méthode de preventDefault() du keydown:

onkeydown="function(e) { validNumbers(e); }"

function validNumbers(e) {
    if (e.keyCode == 1 || e.keyCode == 2 ... etc) {
        e.preventDefault();
    }
}

Ceci va bloquer des caractères spécifiques ( référence ) de jamais entrer dans le champ de saisie. Notez que cela ne bloque pas le copier-coller de sorte que vous devrez soit encore d'évaluer toute la chaîne « onpaste » ou empêcher « onpaste » avec un gestionnaire d'événements similaires.

est pas non plus une solution multi-Brower, mais devrait obtenir vos pieds beaucoup humide. Voir cette jsFiddle un exemple vivant.