关于opacity在firefox的用法-为何文本框中的光标不见了。

相关代码如下：
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=gb2312" />
<style type="text/css"> 
#div1 { position: relative; } 
#text1{ position: absolute; left: 0; top: 0;  font-size: 16px; } 
#text2{ position: absolute; left: 0; top: 0;  font-size: 16px;opacity: 0;} </style> 
<script type="text/javascript"> function changeMark1() 
{
   var strvalue = document.getElementById('text2').value;
   document.getElementById('text1').value = strvalue.replace(/\S|\s/g,"*");
} 
</script>
</head><body><div id="div1"> 
<input id="text1" > 
<input type="text1" id="text2" oninput="changeMark1()"  maxlength="4" >
</div> 
</body>
</html>
为何实现完毕之后，文本框中的光标不见了。请高手帮忙解决。

解决方案 »

  1.   

    为啥要用个覆盖的呢?<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> 
    <html xmlns="http://www.w3.org/1999/xhtml"> 
    <head> 
    <meta http-equiv="Content-Type" content="text/html; charset=gb2312" /> 
    <style type="text/css"> 
    #div1 { position: relative; } 
    #text1{ position: absolute; left: 0; top: 0;  font-size: 16px; } 
    </style> 
    <script type="text/javascript"> 
    function changeMark1() 
    { 
      document.getElementById('text1').value = document.getElementById('text1').value.replace(/\S|\s/g,"*"); 
    } 
    </script> 
    </head> <body> <div id="div1"> <input type="text1" id="text1" oninput="changeMark1()"  maxlength="4" > 
    </div> 
    </body> 
    </html>