I am trying to create a username 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=username id=username placeholder=Enter your username>

</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) {

                return false;

            }

            else {

                return true;

            }

        }

    }

}

My second JS script is:
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();

}

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

Any enlightening answer would be greatly appreciated!