Comment bloquer ou restreindre les caractères spéciaux des champs de saisie avec jquery ?

Question

Comment bloquer la saisie de caractères spéciaux dans un champ de saisie avec jquery ?

Answer 1

Un exemple simple utilisant une expression régulière que vous pouvez modifier pour autoriser/refuser ce que vous voulez.

$('input').on('keypress', function (event) {
    var regex = new RegExp("^[a-zA-Z0-9]+$");
    var key = String.fromCharCode(!event.charCode ? event.which : event.charCode);
    if (!regex.test(key)) {
       event.preventDefault();
       return false;
    }
});

Answer 2

Je cherchais une réponse qui limite la saisie aux seuls caractères alphanumériques, tout en permettant l'utilisation des caractères de contrôle (par exemple, retour arrière, suppression, tabulation) et le copier-coller. Aucune des réponses fournies que j'ai essayées ne répondait à toutes ces exigences, et j'ai donc trouvé la réponse suivante en utilisant la fonction input événement.

$('input').on('input', function() {
  $(this).val($(this).val().replace(/[^a-z0-9]/gi, ''));
});

Edit :
Comme rinogo Comme indiqué dans les commentaires, l'extrait de code ci-dessus force le curseur à se placer à la fin de la saisie lorsque l'on tape au milieu du texte. Je pense que l'extrait de code ci-dessous résout ce problème.

$('input').on('input', function() {
  var c = this.selectionStart,
      r = /[^a-z0-9]/gi,
      v = $(this).val();
  if(r.test(v)) {
    $(this).val(v.replace(r, ''));
    c--;
  }
  this.setSelectionRange(c, c);
});

Answer 3

Réponse courte : empêcher l'événement "keypress" :

$("input").keypress(function(e){
    var charCode = !e.charCode ? e.which : e.charCode;

    if(/* Test for special character */ )
        e.preventDefault();
})

Longue réponse : Utilisez un plugin comme jquery.alphanum

Il y a plusieurs éléments à prendre en compte pour choisir une solution :

• Texte collé
• Les caractères de contrôle tels que backspace ou F5 peuvent être empêchés par le code ci-dessus.
• é, í, ä etc.
• Arabe ou chinois...
• Compatibilité entre navigateurs

Je pense que ce domaine est suffisamment complexe pour justifier l'utilisation d'un plugin tiers. J'ai essayé plusieurs des plugins disponibles, mais j'ai trouvé des problèmes avec chacun d'entre eux, alors je me suis lancé et j'ai écrit jquery.alphanum . Le code ressemble à ceci :

$("input").alphanum();

Ou pour un contrôle plus fin, ajoutez des paramètres :

$("#username").alphanum({
    allow      : "€$£",
    disallow   : "xyz",
    allowUpper : false
});

J'espère que cela vous aidera.

Answer 4

Jetez un coup d'œil au plugin alphanumérique jQuery. https://github.com/KevinSheedy/jquery.alphanum

//All of these are from their demo page
//only numbers and alpha characters
$('.sample1').alphanumeric();
//only numeric
$('.sample4').numeric();
//only numeric and the .
$('.sample5').numeric({allow:"."});
//all alphanumeric except the . 1 and a
$('.sample6').alphanumeric({ichars:'.1a'});

Answer 5

Ecrivez un code javascript sur l'événement onkeypress de la zone de texte. selon les besoins, autorisez et limitez les caractères dans votre zone de texte.

function isNumberKeyWithStar(evt) {
    var charCode = (evt.which) ? evt.which : event.keyCode
    if (charCode > 31 && (charCode < 48 || charCode > 57) && charCode != 42)
        return false;
    return true;
}
function isNumberKey(evt) {
    var charCode = (evt.which) ? evt.which : event.keyCode
    if (charCode > 31 && (charCode < 48 || charCode > 57))
        return false;
    return true;
}
function isNumberKeyForAmount(evt) {
    var charCode = (evt.which) ? evt.which : event.keyCode
    if (charCode > 31 && (charCode < 48 || charCode > 57) && charCode != 46)
        return false;
    return true;
}