How to disallow specific characters when entered in a form input in plain JavaScript?
<p>I am trying to create a username textbox that blocks the user's input if it is any of these (!,@,#,$,%,^,&amp;,*,(,),+,=,;,:,`,~,|,',?,/,.,>,&lt;,,, ,").</p>

<p>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.</p>

<p>My current HTML code is:</p>

<pre><code>&lt;form name = "RegForm" class="login"&gt;
   &lt;input type="text" name="username" id="username" placeholder="Enter your username"&gt;
&lt;/form&gt;
</code></pre>

<p>My first JS script is:
<a href="https://jsfiddle.net/ck7f9t6x" rel="noreferrer">https://jsfiddle.net/ck7f9t6x</a></p>

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

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

<p>My second JS script is:
<a href="https://jsfiddle.net/2tsehcpm/" rel="noreferrer">https://jsfiddle.net/2tsehcpm/</a></p>

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

<p>What is wrong with my code and what should I be doing instead?</p>

<p>Any enlightening answer would be greatly appreciated!</p>