How to disallow specific characters when entered in a form input in plain JavaScript?

I am trying to create a useame textbox that blocks the user's input if it is any of these (!,@,#,$,%,^,&,*,(,),+,=,;,:,`,~,|,',?,/,.,>,<,,, ,").

The idea is not to make the check afterwards but at the moment of the click. I've had two ideas of doing that both ending up bad. The first JS script doesn't seem to work at all and the second JS script freezes the entire tab.

My current HTML code is:

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

My first JS script is: 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) {
                retu false;
            }
            else {
                retu true;
            }
        }
    }
}

My second JS script is: https://jsfiddle.net/2tsehcpm/

var useame_textfield = document.forms.RegForm.useame;
useame_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();
}

What is wrong with my code and what should I be doing instead?

Any enlightening answer would be greatly appreciated!