Jak uniemożliwić określone znaki po wprowadzeniu w formularzu wejściowym w prostym JavaScript?

Question

Próbuję utworzyć pole tekstowe username, które blokuje dane wejściowe użytkownika, jeśli jest to którekolwiek z nich (!, @, #, $,%, ^, &, *, (,), +, =,;,:, `, ~, |, ',?, /,.,>, < ,,,,").

Nie chodzi o to, aby sprawdzić później, ale w momencie kliknięcia. . idee to robić zarówno kończąc zły pierwszy skrypt JS nie wydają się działać w ogóle, a drugi skrypt JS zawiesza całą kartę

Mój obecny HTML kod jest:.

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

Mój pierwszy Skrypt JS to: 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; 
      } 
     } 
    } 
} 

Mój drugi skrypt JS jest: 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(); 
} 

Co jest nie tak z moim kodu i co mam robić zamiast tego?

Każda oświecająca odpowiedź byłaby bardzo ceniona!

Answer 1

I zostały zaktualizowane początkowej skrzypce here .

Metoda, którą wybrałem dla uproszczenia, polegała na uzyskaniu znaku ciągnięcia klawisza do naciśnięcia, a następnie sprawdzeniu, czy znajduje się w tablicy prohibited.

Należy pamiętać, że zmienia się za pomocą onkeypress zamiast onkeydown zdarzenie, jako pierwsza zawiera modyfikatory takie jak zmianowej klucza przy korzystaniu fromCharCode(), podczas gdy inne nie (jak keyPressed kontroli właściwy pełna kombinacja klawiszy).

Kod:

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;  
}; 

Answer 2

prohibitedChars jest ciągiem niechcianego characters.So można podzielić wartość sygnału wejściowego, a następnie użyć indexOf metodę zatwierdź 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 = "" 
} 
}) 
} 

Sprawdź to JsFiddle