input标签关于透明度的问题

  <input type="text" id="hint_pass" maxlength="20" tabindex="-1"/>  
 <input type="text" id="pass" name="pass" maxlength="20"/>  

有两个input,id为pass的覆盖在id为hint_pass的上面，点击输入框pass获取真实值，hint_pass输出***，问题是当设置pass的透明度opacity为0时，点击输入框没有焦点闪烁怎么解决

 <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.5;}  
    form{position:relative;}  
    #hint_pass{position:absolute;left:100px;z-index:2;}  
 </style> 
<input type="text" id="hint_pass" maxlength="20" tabindex="-1"/>  
<input type="text" id="pass" name="pass" maxlength="20"/>  
<script>  
    var pass=document.getElementById('pass');  
    var hint_pass=document.getElementById('hint_pass');  
    pass.onkeyup=pass.onchange=function(){
        pass.value=hint_pass.value.replace(/./g,'*');
    };  
</script>   

因为用password会出问题，所以用text模仿password效果

不是很明白，能不能贴个图？为什么要点击Pass获取值？？

为什么要设置两个输入密码框？

opacity为0有你也看不到啊，用js吧，给它一点闪烁的时间