关于模拟密码框的相关问题，请高手帮忙解决-在线请教

<!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>
<style type="text/css">
#div1 { position: relative; }
#text1{ position: absolute; left: 0; top: 0; font-size: 8px;}
#text2{ position: absolute; left: 0; top: 0; font-size: 8px;  -moz-opacity:0;opacity: 0;filter: alpha(opacity=0); }</style>
<script type="text/javascript" src="UI/ UIControl/ajax_lib_xml.js"></script>
<script type="text/javascript">function changeMark1()
{
var password = String.fromCharCode(event.keyCode);
var url = '/Backend/APP/password.app';
var data = "password="+password;
document.getElementById('text1').value = document.getElementById('text1').value+"@";}</script>
</head>
<body>
password:
<div id="div1">
<input id="text1" />
<input type="password" id="text2" onKeyPress="changeMark1()">
<br>
</div>
</body>
</html>以上是我的测试代码。要求如下：页面显示：1）因为页面布局是一个文本框，和一个密码框重叠在一起。所以在对密码框输入的时候。光标一定和现在在text框的字符一致。
功能需求：1）输入一个字符在密码框中，显示另一个字符在文本框内。此功能已实现。2）通过删除键，在密码框进行删除，同时在文本框也删除相同位置的字符。3）中间任意位置插入字符。通过鼠标，或者左右键。在中间插入一个字符，那么在文本框中的相应位置插入其想要显示的字符。本例是显示@

解决方案 »

  1.   

    <input type="password" id="text2" onpropertychange="document.getElementById('text1').value=this.value">
      

  2.   

    要显示圆点字符，需要页面为utf-8编码。如果不使用圆点字符，需要更换为等宽的其他字符。
    <!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=utf-8" />
    <style type="text/css"> 
    #div1 { position: relative; } #text1{ position: absolute; left: 0; top: 0; font-size: 8px;} 
    #text2{ position: absolute; left: 0; top: 0; font-size: 8px;  -moz-opacity:0;opacity: 0;filter: alpha(opacity=0); } 
    </style> 
    <script type="text/javascript" src="UI/ UIControl/ajax_lib_xml.js"> </script> 
    <script type="text/javascript"> function changeMark1() 
    {
    var strvalue = document.getElementById('text2').value;
    document.getElementById('text1').value = strvalue.replace(/\S|\s/g,"●");
    } </script> 
    </head> 
    <body> 
    password: 
    <div id="div1"> 
    <input id="text1" /> 
    <input type="password" id="text2" onpropertychange="changeMark1()"><br> 
    </div> 
    </body> 
    </html> 
      

  3.   

    十分感谢楼上的朋友。关于功能问题都可以解决
    但是还有一点。例如我在text2下输入a。要让text1里面显示*或者其他字符.该怎么办啊？
    目前关于#text1{ position: absolute; left: 0; top: 0; font-size: 8px;} 
    #text2{ position: absolute; left: 0; top: 0; font-size: 8px;  -moz-opacity:0;opacity: 0;filter: alpha(opacity=0); } 过滤处理，firefox和safari都不支持。请问大家还有其他标准的答案咩？
      

  4.   


    <!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>
    <style type="text/css">
    #div1 { position: relative; }
    #text1{ position: absolute; left: 0px; top: 0px; font-size: 8px;}
    #text2{ position: absolute; left: 0px; top: 0px; font-size: 8px;  -moz-opacity:0;opacity:0;filter: alpha(opacity=0); }</style>
    <script type="text/javascript" src="UI/ UIControl/ajax_lib_xml.js"> </script>
    <script type="text/javascript">
    var UN=''; var o=null; 
    window.onload=function(){o=document.getElementById('text1');UN=o.value+"@"}function changeMark1(e){
      e=e||window.event;
      var password=document.getElementById('text2').value;//alert(password)
      //var password = String.fromCharCode(e.keyCode)
      var url = '/Backend/APP/password.app';
      var data = "password="+password;  
      o.value=UN+password.replace(/\S|\s/g,"●");
    }
    </script>
    </head>
    <body>
    password:
    <div id="div1">
    <input id="text1" onpropertychange="UN =this.value+'@'" oninput="UN=this.value+'@'">
    <input type="password" id="text2" onkeyup="changeMark1(event)">
    <br>
    </div>
    </body>
    </html>
      

  5.   

    十分感谢toury那么请问设置过滤如何在火狐和苹果下支持内？请各位高手帮帮看看。
      

  6.   

    #text2{  
      position: absolute; 
      left: 0; 
      top: 0; 
      font-size: 8px;
      -moz-opacity:0;
      opacity: 0;
      filter: alpha(opacity=0);
    }
    ---------->
    #text2{  
      position: absolute; 
      left: 0; 
      top: 0; 
      font-size: 8px;
      filter: alpha(opacity=0);/*换顺序，先IE*/
      -moz-opacity:0;          /*后FF*/
      opacity: 0;
    }
      

  7.   

    我又测试了一下，4楼代码IE下出了问题，原因是onpropertychange。 汗~
    重写了一下，IE下由于TEXT2有滤镜，光标透过它落到TEXT1上，与TEXT2的输入位置相同但与TEXT1显示的位置错位了，没想好怎么处理。先发上来，顺便加给你个FF滤镜测试<!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>
    <style type="text/css">
    #div1 { position: relative; }
    #text1{ position: absolute; left: 0px; top: 0px; font-size: 18px;}
    #text2{ position: absolute; left:0px;  top:0px;  font-size:18px;  filter:alpha(opacity=0);  -moz-opacity:0;  opacity:0;}/************************FF1.5.2下测试filter兼容示例***************************************/
    #filtertest{
      background:#000;
      color:white;
      font-size:72px;  
      width:400px;
      height:180px;
      left:5px;
      top:5px;
      filter: Alpha(opacity=20);
      -moz-opacity:.2;
      opacity:0.2;
    }
    </style>
    <script type="text/javascript" src="UI/ UIControl/ajax_lib_xml.js"> </script>
    <script type="text/javascript">
    var UN=''; var o=null; 
    window.onload=function(){o=document.getElementById('text1');UN=o.value+"@"}function changeMark1(e){
      e=e||window.event;
      var password=document.getElementById('text2').value;//alert(password)
      //var password = String.fromCharCode(e.keyCode)
      var url = '/Backend/APP/password.app';
      var data = "password="+password;  
      o.value=UN+password.replace(/\S|\s/g,"●");
    }
    </script>
    </head>
    <body>
    password:
    <div id="div1">
    <input id="text1" name="text1" value="ABC" onkeyup="UN =this.value+'@'" />
    <input type="password" id="text2" onkeyup="changeMark1(event)" />
    <br>
    </div><br>FF1.5.2下测试filter兼容示例
    <div id='filterdiv' style="border:1px solid red;width:500px;height:300px">
    <input type="text" id="filtertest" value="FF下的滤镜" />
    </div>
    </body>
    </html>
      

  8.   

    恩。。我知道了。
    现在的问题是在firefox下。我们设置
      filter: Alpha(opacity=0);
      -moz-opacity:0;
      opacity:0.0;这样有个弊端。就是该输入框的文本框。没有鼠标光标。如何输入？这个问题是致命的。
      

  9.   

    楼主为何这么麻烦呢?你加一个hidden不就行啦?hidden里是得到的真实值,显示是个**,有多少个字符显示几个*,好方便啊...两行JS就搞定了..