Javascript Regex seulement TextBox

Question

J'ai été capable de trouver la solution pour cela dans C#/.net mais pas pour le web html normal. S'il y a déjà une réponse, faites-le moi savoir et je ferai une question.

Comment créer une zone de texte qui n'acceptera que certains caractères (par exemple alphanumériques) basés sur une expression régulière donnée (par exemple [a-zA-Z0-9])? Donc, si un utilisateur essaie d'entrer autre chose, coller inclus, il est supprimé ou non autorisé.

<input type="text" class="alphanumericOnly"> 

Answer 1

La fonction de base serait la suivante:

string = string.replace(/[^a-zA-Z0-9]/g, '') 

Cela remplacerait tous les caractères qui n'est pas décrit par [a-zA-Z0-9].

Maintenant, vous pouvez soit mettre directement dans votre déclaration d'élément:

<input type="text" class="alphanumericOnly" onkeyup="this.value=this.value.replace(/[^a-zA-Z0-9]/g, '')"> 

Ou (comme vous avez utilisé l'indice de classe) vous attribuez ce comportement à chaque élément input avec la classe alphanumericOnly:

var inputElems = document.getElemenstByTagName("input"); 
for (var i=0; i<inputElems.length; i++) { 
    var elem = inputElems[i]; 
    if (elem.nodeName == "INPUT" && /(?:^|\s+)alphanumericOnly(?:\s+|$)/.test(elem.className) { 
     elem.onkeyup = function() { 
      this.value = this.value.replace(/[^a-zA-Z0-9]/g, ''); 
     } 
    } 
} 

Mais il est probablement plus facile de faire cela avec jQuery ou un autre framework JavaScript:

$("input.alphanumericOnly").bind("keyup", function(e) { 
    this.value = this.value.replace(/[^a-zA-Z0-9]/g, ''); 
}); 

Answer 2

En supposant que vous avez l'entrée stockée comme variable input ...

input.onkeyup(function(e) { 
    this.value = this.value.replace(/\W/g, ''); 
} 

chaque pression de touche la valeur de l'entrée sera dépouillé de tous les caractères non-alphanumériques.

Answer 3

Si vous utilisez une méthode .replace sur l'événement keyup, l'entrée scintillera avec les caractères non alphanumériques à mesure qu'ils sont tapés, ce qui apparait sloppy et ne respecte pas les personnes OCD comme moi.

Une approche plus propre serait de se lier à l'événement KeyPress et nier les caractères avant même d'arriver à l'entrée, comme ce qui suit:

$('.alphanumericOnly').keypress(function(e){ 
    var key = e.which; 
    return ((key >= 48 && key <= 57) || (key >= 65 && key <= 90) || (key >= 95 && key <= 122)); 
}); 

Une liste des keycodes de base se trouve here si ce particulier l'ensemble ne correspond pas à vos besoins spécifiques.