<!DOCTYPE html> <html encoding="utf-8"> <head> <style> *{margin:0;padding:0} input{font:14px Monospace;height:20px;width:160px;} label{display:inline-block;width:100px;height:20px;} #pass{position:absolute;left:100px;top:0;opacity:0;filter:alpha(opacity=0);z-index:2;} form{position:relative;} #hint_pass{position:absolute;left:100px;} </style> </head> <body> <form> <label>Password:</label> <input type="text" id="hint_pass" maxlength="20" tabindex="-1" /> <input type="text" id="pass" name="pass" maxlength="20" /> </form> <script> var pass=document.getElementById('pass'); var hint_pass=document.getElementById('hint_pass'); pass.onkeyup=pass.onchange=function(){hint_pass.value=pass.value.replace(/./g,'*');}; </script> </body> </html>