web-dev-qa-db-fra.com

Comment interdire des caractères spécifiques lors de la saisie dans un formulaire en JavaScript pur?

J'essaie de créer une zone de texte de nom d'utilisateur qui bloque la saisie de l'utilisateur s'il s'agit de l'un de ces éléments (!, @, #, $,%, ^, &, *, (,), +, =,;,: ~, |, ',?, /,.,>, <, ").

L'idée n'est pas de faire la vérification après coup, mais au moment du clic. J'ai eu deux idées pour faire en sorte que les deux finissent mal. Le premier script JS ne semble pas fonctionner du tout et le deuxième script JS gèle l'intégralité de l'onglet.

Mon code HTML actuel 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 devrais-je faire à la place?

Toute réponse éclairante serait grandement appréciée!

javascripthtmlarraysvalidationinput
5
Angel Politis

J'ai mis à jour votre violon initial ici .

La méthode que j'ai choisie par souci de simplicité consistait à obtenir le caractère de chaîne de la clé qui tentait d'être enfoncé, puis à vérifier s'il se trouvait dans le tableau prohibited.

Vous devriez noter que j'ai changé pour utiliser l'événementonkeypressau lieu deonkeydown, car le premier inclut des modificateurs tels que la touche shift lorsque vous utilisezfromCharCode(), l’autre ne le fait pas (lorsque vous appuyez sur une touche, c’est la combinaison complète des 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;    
};
2
Matt Way

prohibitedChars est une chaîne de caractères non désirés. Vous pouvez donc fractionner la valeur d'entrée, puis utiliser la méthode indexOf pour valider avec prohibChars 

// 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 = ""
 }
})
}

Vérifiez ceci JsFiddle

1
brk