JSFiddle - React, Tailwind, and code Playground

HTML

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

JavaScript

// get the input element
var el = document.getElementById('username');

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