如何实现126邮箱的收件人的地址栏效果，大部分的功能已经实现咯，但是还有点小问题（300分答谢）

Opera还真恶心，光标放text的第一个位置了,只要使用Range对象来重置光标位置了.正在调试中js更改了这里
function getEmail(e,v)
   {
     e=e||event;
     if(e.keyCode==27||e.keyCode==13||e.keyCode==38||e.keyCode==40)//为自定义的快捷键时退出
       return;
     var vs=v.split(","); //========   
     v=vs[vs.length-1];//========
//下面的没变
}function setTxt(v)
   {
     v=v.replace("&lt;","<").replace("&gt;",">");
     email.value=email.value.substr(0,email.value.lastIndexOf(",")+1)+v+",";//====================
     if(/opera/gi.test(navigator.userAgent))
     {
       //Opera的话会把"变为&quot;，只好替换回来了.
       email.value=email.value.replace(/&quot;/gi,"\"");
      //Opera还真恶心，光标放text的第一个位置了,只要使用Range对象来重置光标位置了
      emial.select();
      //var r=email.createRange();
     // r.move(email.value.length);
     } 
     addr.style.display="none";
   }

解决方案 »

  1.   

    ie6和ff2可以啊opera就差光标的位置
      

  2.   

    呵呵两个问题解决咯，但是出现一个小小的问题
    我是用textarea来接受地址，如果用回车建选择的话，那么就会出现换行咯，而这个又是我不希望出现的
    <html>
     <head>
      <meta http-equiv="content-type" content="text/html;charset=gb2312" />
      <title>1</title>
      <style type="text/css">
        .focus{background-color:#AFDBFF}
        div{color:blue}
        body{font-size:10pt}
      </style>
     </head>
    <body>
       <script type="text/javascript">
        //我想数据量应该不是很大（300条以上时可以考虑用ajax），这样把这里改为你的服务器生成下面格式的js数组
       var link=[["张三","[email protected]"],["王五","[email protected]"],["赵六","[email protected]"],["小张","[email protected]"]
       ,["小李","[email protected]"],["张龙","[email protected]"],["赵虎","[email protected]"]];
       var ts=null;
       var addr,email;
       window.onload=function()
       {
         addr=document.getElementById("addr");
         email=document.getElementById("email");
         var point=getDivPosition(email);
         addr.style.left=point.x+"px";
         addr.style.top=point.y+"px";
       }
       function getDivPosition(o)
       {
         var point=new Object();
         point.x=o.offsetLeft;
         point.y=o.offsetTop+o.offsetHeight;
         while(o=o.offsetParent)
         {
           point.x+=o.offsetLeft;
           point.y+=o.offsetTop;
         }
         return point;
       }
       function getEmail(e,v)
       {
         e=e||event;
         if(e.keyCode==27||e.keyCode==13||e.keyCode==38||e.keyCode==40)//为自定义的快捷键时退出
           return;
       var vs=v.split(","); //========   
               v=vs[vs.length-1];//========
         if(v!="")
         {
           if(/^ +$/g.test(v))//输入空格，输出所有地址原来的代码：(/^ +$/g.test(v))
           {
             //displayAll();
           }
           else if(/^[a-bA-Z0-9]+$/gi.test(v))//按email搜索
           {
             if(ts!=null)
               clearTimeout(ts);
             ts=setTimeout("displaySearch(1,'"+v.replace(/'/g,'\'')+"')",500);//延时500ms查询
           }
           else if(/^[\u4E00-\u9FFF]+$/gi.test(v))//输入汉字，按姓名搜索
           {
             if(ts!=null)
               clearTimeout(ts);
             ts=setTimeout("displaySearch(0,'"+v.replace(/'/g,'\'')+"')",500);//延时500ms查询
           }
         }
       }
       function displaySearch(type,v)
       {
         var First=true;
         var data="";
         for(var i=0;i<link.length;i++)
         {
             if(link[i][type].indexOf(v)==0)
             {
               if(First)
               {
                 First=false;
                 data+='<div onclick="setTxt(this.innerHTML)" class="focus">"'+link[i][0]+'"&lt;'+link[i][1]+'&gt;</div>';
               }
               else
                 data+='<div onclick="setTxt(this.innerHTML)">"'+link[i][0]+'"&lt;'+link[i][1]+'&gt;</div>';
             }
         }
         addr.innerHTML=data;
         addr.style.display="";
       }
       function displayAll()
       {
         var data="";
         for(var i=0;i<link.length;i++)
         {
           if(i==0)
             data+='<div onclick="setTxt(this.innerHTML)" class="focus">"'+link[i][0]+'"&lt;'+link[i][1]+'&gt;</div>';
           else
             data+='<div onclick="setTxt(this.innerHTML)">"'+link[i][0]+'"&lt;'+link[i][1]+'&gt;</div>';
         }
         addr.innerHTML=data;
         addr.style.display="";
       }
       function setTxt(v)
       {
         v=v.replace("&lt;","<").replace("&gt;",">");
         email.value=email.value.substr(0,email.value.lastIndexOf(",")+1)+v+",";//====================
         if(/opera/gi.test(navigator.userAgent))
         {
           //Opera的话会把"变为&quot;，只好替换回来了.
           email.value=email.value.replace(/&quot;/gi,"\"");
          //Opera还真恶心，光标放text的第一个位置了,只要使用Range对象来重置光标位置了
          emial.select();
          //var r=email.createRange();
         // r.move(email.value.length);
         } 
         addr.style.display="none";   }
       document.onkeydown=function(e)
       {
         e=e||event;
         if(e.keyCode==27)//esc键
           addr.style.display="none";
         else
         {
           if(addr.style.display!="none")
           {
             var divs=addr.getElementsByTagName("div");
             for(var i=0;i<divs.length;i++)
             {         
                 if(divs[i].className=="focus")
                 {
                    if(e.keyCode==38)//向上键
                    {
                        var preDiv=divs[i-1];
                        if(preDiv!=null)
                        {
                          divs[i].className="";
                          preDiv.className="focus";
                          return;
                        }
                     }
                     else if(e.keyCode==40)//向下键
                     {
                        var nextDiv=divs[i+1];
                        if(nextDiv!=null)
                        {
                          divs[i].className="";
                          nextDiv.className="focus";
                          return;
                        }
                     }
                     else if(e.keyCode==13)//enter键
                     {
                       setTxt(divs[i].innerHTML);
                       return;
                     }               
                  }
               } //end for        
            }
          }
       }//end document.onkeydown
       </script>
    <br>
       <form name="form1" method="post" action="">
          <table width="498" border="0">
         <tr>
           <td width="136">Email: </td>
           <td width="352"><textarea name="email" id="email" tabindex="1" onKeyUp="getEmail(event,this.value)" autocomplete="off" style="width:400;overflow:visible;word-break:break-all"></textarea></td>
         </tr>
         <tr>
           <td>&nbsp;</td>
           <td>&nbsp;</td>
         </tr>
         <tr>
           <td>&nbsp;</td>
           <td>&nbsp;</td>
         </tr>
       </table>
         <div id="addr" style="display:none;position:absolute; background-color:#eeeeee"></div>
       </form>
    </body>
    </html>
      

  3.   

    加3行代码,你不需要空格显示所有联系人了??function displaySearch(type,v)
       {
         /// 上面代码一样
         addr.focus();//=====================使addr获得焦点,这样按enter键就不会有换行了
       }
       function displayAll()
       {
         /// 上面代码一样
         addr.focus();//=====================使addr获得焦点,这样按enter键就不会有换行了
       }
       function setTxt(v)
       {
       /// 上面代码一样
        setTimeout('email.focus();',10);//用setTimeout使email 1ms后获得焦点,如果直接email.focus()的话会有换行,时间至少为1ms,有个时间差
       }
      

  4.   

    可以把displayAll和displaySeach中的代码用{}括起,防止查询不到数据时使textarea失去焦点if(data!="")//======
    {//======
         addr.innerHTML=data;
         addr.style.display="";
         addr.focus();
    }//======