Comment interdire les caractères spécifiques lors de la saisie dans un formulaire d'entrée dans la plaine du JavaScript?

Je suis en train de créer une zone de texte nom d'utilisateur qui bloque l'entrée de l'utilisateur si il est un de ces (!,@,#,$,%,^,&,*,(,),+,=,;,:,`,~,|,',?,/,.,>,<,,,, ,").

L'idée n'est pas de faire le chèque par la suite, mais au moment du clic. J'ai eu deux idées de faire que les deux finissent mal. La première JS script ne semble pas fonctionner et la seconde JS script gèle l'ensemble de l'onglet.

Mon code HTML est:

<form name = "RegForm" class="login">
   <input type="text" name="username" id="username" placeholder="Enter your username">
</form>

Mon premier script JS est:
https://jsfiddle.net/ck7f9t6x

userID_textfield.onkeydown = function(e) {   
    var prohibited = "!@#$%^&*()+=;:`~\|'?/.><, \"";
    var prohibitedchars = prohibited.split("");
    var prohibitedcharcodes = new Array();

    for (var i = 0; i < prohibitedchars.length + 1; i++) {
        prohibitedcharcodes.push(prohibitedchars[i].charCodeAt(i));
        for (var a = 0; a < prohibitedcharcodes.length + 1; a++) {
            if (prohibitedcharcodes[a] === e.which) {
                return false;
            }
            else {
                return true;
            }
        }
    }
}

Mon deuxième script JS est:
https://jsfiddle.net/2tsehcpm/

var username_textfield = document.forms.RegForm.username;
username_textfield.onkeydown = function(e) {
    var prohibited = "!@#$%^&*()+=;:`~\|'?/.><, \"";
    var prohibitedchars = prohibited.split("");
    var text = this.value.toString();
    var chars = text.split("");
    for (var i = 0; i < chars.length + 1; i++) {
        for (var a = 0; a < prohibitedchars.length + 1; a++) {
            if (chars[i] == prohibitedchars[a]) {
                chars[i] = null;
            }
        }
    }
    this.value = chars.join();
}

Quel est le problème avec mon code et que dois-je faire à la place?

Toute réponse instructive serait grandement apprécié!

OriginalL'auteur Angel Politis | 2016-05-10

  1. 2

    J'ai mis à jour votre premier violon ici.

    La méthode que j'ai choisi pour la simplicité était d'obtenir la chaîne de caractères de la clé d'essayer d'être pressé et vérifié si c'était dans le prohibited tableau.

    Vous devriez noter que j'ai changé à l'aide de la onkeypress au lieu de onkeydown événement, comme le premier comprend les modificateurs comme le maj clé lors de l'utilisation de fromCharCode(), tandis que l'autre n'a pas (comme keypressed vérifie l'intégralité de la combinaison de touches).

    Code:

    el.onkeypress = function(e) {   
    //invalid character list
    var prohibited = "!@#$%^&*()+=;:`~\|'?/.><, \"";
    //get the actual character string value
    var key = String.fromCharCode(e.which);
    //check if the key pressed is prohibited    
    if(prohibited.indexOf(key) >= 0){
        console.log('invalid key pressed');    
        return false;
    }
    return true;    
};
    Donc, c'est pourquoi, lorsque j'ai appuyé sur maj + une touche qu'il ne montrait qu'une maj du charCode. Des informations très utiles Mat; succincte et sur le point droit!

    OriginalL'auteur Matt Way

  2. 1

    prohibitedChars est une chaîne de caractères indésirables.De sorte que vous pouvez diviser la valeur d'entrée et ensuite utiliser indexOf méthode à valider avec prohibitedChars 

    //String of prohibited chars
var prohibitedChars = "!@#$%^&*()+=;:`~\|'?/.><, \"";
var _input = document.getElementById("username");
//Validate on keyup
_input.addEventListener('keyup',function(){
var _getIpValue = _input.value;

_validateField(_getIpValue);
})
//This function does the actual validation
function _validateField(ipVal){
//split the input 
var arrayString = ipVal.split("");
//iterate through each of them and check if it match with any chars of prohibitedChars
arrayString.forEach(function(item){
 //if item match it will retun -1
 if(prohibitedChars.indexOf(item) !== -1){
  alert(item +" Not allowed");
  _input.value = ""
 }
})
}

    Cochez cette JsFiddle

    Le code fonctionne grandement @user2181397, mais comme je l'ai dit je préfère les caractères non valides à être jetés sans être tapé à tous! Cependant, je vais garder la partie de votre code .forEach(), parce que c'est une façon de vérifier un tableau, je ne savais pas comment l'utiliser!

    OriginalL'auteur brk