JSFiddle - React, Tailwind, and code Playground

by Kevin Faulhaber

HTML

<div style="display: none;" id="alert">
    <form>
        <input id="password" type="password" name="password" placeholder="password here"/>
        <input id="submit" type="submit" value="Submit"/>   
    </form>
</div>
<button id="show">Show</button>

CSS

#alert {
    position: absolute;
    left: 50%;
    top: 50%;
    z-index: 1000;
    background-color: red;
    padding: 30px;
}

JavaScript

var pass = document.getElementById('password');
pass.onkeypress = function(e){
     var key = e.keyCode;
    if(key == 32){
      //spacebar -- so lets clear what has currently been written
       alert('Spaces are not allowed, we helped you out and did not add it to the password. ;) ');
       e.preventDefault();
    }
}
document.getElementById('show').onclick = function(){
    document.getElementById('alert').style.display = 'block';
}

document.getElementById('submit').onclick = function(e){
  e.preventDefault();
  alert(pass.value + ' ... ' + (new Array(pass.value.length+1).join("*")));
}