Empêcher la saisie de caractères invalides dans les champs : un guide complet

Question

Onkeydown, j'exécute le JavaScript suivant :

fonction ThisOnKeyDown(el) {
   if (el.title == 'textonly') {
       !(/^[A-Za-zÑñ-s]*$/i).test(el.value) ? el.value = el.value.replace(/[^A-Za-zÑñ-s]/ig, '') : nul;
   }
   if (el.title == 'numbersonly') {
       !(/^[0-9]*$/i).test(el.value) ? el.value = el.value.replace(/[^0-9]/ig, '') : null;
   }
   if (el.title == 'textandnumbers') {
       !(/^[A-Za-zÑñ0-9-s]*$/i).test(el.value) ? el.value = el.value.replace(/[^A-Za-zÑñ0-9-s ]/ig, '') : nul;
   }
}
L'un de ces trois attributs de titre est attribué à chaque champ de saisie de la page. Le code fonctionne tant que les caractères invalides sont correctement supprimés, mais pas tant que le caractère suivant n'est pas saisi. J'aimerais trouver un moyen de rejeter simplement les entrées invalides. Merci pour votre aide! 
Modifier : je crée des événements à l'échelle mondiale. Voici ce que j'ai fait : 
function Globalisation() {
      var inputs = document.getElementsByTagName('input');
      pour (i = 0; i < inputs.length; i++) {
          entrées[i].onfocus = createEventHandler(
              ThisOnFocus, entrées[i]);
          entrées[i].onblur = createEventHandler(
              ThisOnBlur, entrées[i]);
          entrées[i].onkeydown = createEventHandler(
              ThisOnKeyDown, entrées[i]);
          entrées[i].onkeyup = createEventHandler(
              ThisOnKeyUp, entrées[i]);
      }
  }
globalization()runbody.onload
Ainsi, un champ de saisie typique contient du HTML et aucun appel de fonction comme celui-ci : 
 ;

Answer 1

Le code ci-dessus illustre cela : seuls les chiffres sont autorisés. Vous pouvez le modifier en ajoutant une exception, par exemple BACKSPACE comme ceci

    
        
        
        sssccc
        
    
        
    

Answer 2

Pour éviter qu'il soit défini en premier lieu, vous pouvez renvoyer false sur le gestionnaire d'événement keydown, empêchant ainsi l'événement de se propager davantage.

J'ai écrit l'exemple ci-dessous en utilisant jQuery, mais vous pouvez utiliser la même fonction avec une liaison traditionnelle.

Bien que la validation côté serveur soit également importante, la validation côté client est également importante pour la convivialité.

$("input.number-only").bind({
    keydown: function(e) {
        if (e.shiftKey === true ) {
            if (e.which == 9) {
                return true;
            }
            return false;
        }
        if (e.which > 57) {
            return false;
        }
        if (e.which==32) {
            return false;
        }
        return true;
    }
});