当用户输入合法的(字母,数字,下划线,以字母开头)用户名后,点击坚持按钮后显现层可以让用户选择不同后缀名的用户名。跟163注册的那个一样

解决方案 »

  1.   

    后缀名是你设定好的,把后缀名设置成数组,然后循环的与输入的名字搭配,然后生成HTML!
      

  2.   

    <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN">
    <html>
    <head>
        <title>New Document </title>
        <meta name="Generator" content="EditPlus">
        <meta name="Author" content="">
        <meta name="Keywords" content="">
        <meta name="Description" content="">    <script language="JavaScript" type="text/javascript">
        var g_ArrEmailList;
    var g_MainDiv=null;
    var g_Body=null;
    var g_FirstTd=null;
    var g_CurrentTd=null;
    var g_InputObject=null;
    var g_OldInnerTxt="";
    var g_NewInnerTxt="";
    var g_TdCssClassName="autofinish_over";
    var g_TbCssClassName="autofinish";
    var g_AddListContainer=null;
    var g_IgnoreIE=false;
    g_IgnoreIE=(navigator.userAgent.indexOf('MSIE 5')!=-1||navigator.userAgent.indexOf('Mac')!=-1);
    function f_OnKeyDown(obj,event){
     if(obj!=g_InputObject){
      if(g_MainDiv!=null){g_MainDiv.innerHTML="";g_MainDiv=null;};
      g_OldInnerTxt="";g_NewInnerTxt="";g_FirstTd=null;g_CurrentTd=null;g_InputObject=obj;};
      f_InitMain();
      var kc=event.keyCode;
      switch(kc){
       case 13:f_EnterKey();f_SetDivDisplay(false);return false;break;
      case 27:f_EscapeKey();f_SetDivDisplay(false);return false;break;
      case 8:f_BackSpaceKey(obj,event);return;break;
      case 38:f_UpKey();return;break;
      case 40:f_DownKey();return;break;default:break;};return true;};
    function f_OnKeyUp(obj,event){
     var kc=event.keyCode;
     var sTemp="13,27,38,40,9,116,";
     kc=kc+"";
     if(sTemp.indexOf(kc)>-1){return false;};
     f_InitDivData(obj,event);
     if(g_NewInnerTxt==""&&kc!=32){f_SetDivDisplay(false);}else{f_SetDivDisplay(true);};};
     
    function f_OnKeyPress(){return;};
    function f_OnChange(){return;};
    function f_OnBlur(){if(g_InputObject==null){return;};
    var s=g_InputObject.value;
    var x=s.substr(s.length-1,1);
    if(x==","||x==";"){g_InputObject.value=s.substr(0,s.length-1);};return;};
    function f_OnPasete(){return;};
    function f_InitMain(){
     if(g_Body==null){g_Body=document.body;};
     if(g_MainDiv==null){g_MainDiv=f_CreateDiv();g_Body.appendChild(g_MainDiv);};};
     
    function f_CreateDiv(){
     var div=document.createElement("div");
     div.id="divEmailAddressMain";
     div.style.position="absolute";
     div.style.display="";return div;};
     
    function f_SetDivDisplay(bTrue){
     if(bTrue){g_AddListContainer.style.display="";}else{g_AddListContainer.style.display="none";};};
      
    function f_GetX(e){var l=e.offsetLeft;while(e=e.offsetParent){l+=e.offsetLeft;};return l;};function f_GetY(e){var t=e.offsetTop;while(e=e.offsetParent){t+=e.offsetTop;};return t;};function f_CreateTable(){var oTable=document.createElement("table");oTable.border=0;oTable.cellSpacing=2;oTable.cellPadding=2;oTable.className=g_TbCssClassName;return oTable;};function f_CreateRow(table){var rowNode=table.insertRow(-1);return rowNode;};function f_CreateColumn(row,i){var colNode=row.insertCell(document.all?-1:0);colNode.id="tdACMA_"+i;colNode.zIndex=i;colNode.align="left";colNode.style.cursor=document.all?"hand":"pointer";colNode.onmouseover=f_TdOnmouseover;colNode.onclick=f_TdOnclick;if(i==0){colNode.className=g_TdCssClassName;g_FirstTd=colNode;g_CurrentTd=colNode;}else{colNode.className="";};return colNode;};function f_TdOnmouseover(e){var o;if(!e){var e=window.event;};if(e.target){o=e.target;};if(e.srcElement){o=e.srcElement;};while(o.tagName!="TD"){o=o.parentNode;};o.className="";if(g_CurrentTd!=null){g_CurrentTd.className="";};g_CurrentTd=o;g_CurrentTd.className=g_TdCssClassName;};function f_TdOnclick(){f_FillCurrentEmail();};
    function f_FillCurrentEmail(){
     if(g_CurrentTd==null||g_InputObject==null){return;};
     if(g_ArrEmailList==null||g_ArrEmailList.length==0){return;};
     var i=parseInt(g_CurrentTd.zIndex);
     var s=g_OldInnerTxt;
     if(g_OldInnerTxt!=""){s+=",";};
     g_InputObject.focus();
     g_InputObject.value=s+"\""+g_ArrEmailList[i][0]+"\" "+"<"+g_ArrEmailList[i][1]+">,";f_SetDivDisplay(false);g_CurrentTd=null;};
     
    function f_InitDivData(objInput,event){
     var oTb,oTr,oTd;
     g_ArrEmailList=f_GetArrEmailList(event);
     if(g_ArrEmailList!=null){
      g_MainDiv.innerHTML="";
      oTb=f_CreateTable();
      g_MainDiv.appendChild(oTb);
      for(var i=0;i<g_ArrEmailList.length;i++)
      {oTr=f_CreateRow(oTb);
      oTd=f_CreateColumn(oTr,i);
      var sStrongTextName=g_ArrEmailList[i][0];
      var sStrongTextAddr=g_ArrEmailList[i][1];
      if(g_ArrEmailList[i][0].substring(0,g_NewInnerTxt.length)==g_NewInnerTxt){
       sStrongTextName="<b>"+g_NewInnerTxt+"</b>"+g_ArrEmailList[i][0].substring(g_NewInnerTxt.length,g_ArrEmailList[i][0].length);};
      if(g_ArrEmailList[i][1].substring(0,g_NewInnerTxt.length)==g_NewInnerTxt){
       sStrongTextAddr="<b>"+g_NewInnerTxt+"</b>"+g_ArrEmailList[i][1].substring(g_NewInnerTxt.length,g_ArrEmailList[i][1].length);};
      oTd.innerHTML="'"+sStrongTextName+"<"+sStrongTextAddr+">";
      };
      var e=objInput;
      if(!document.getElementById("dvAddListContainer")){
       var tDiv=document.createElement("div");
       tDiv.id="dvAddListContainer";
       with(tDiv.style){position="absolute";zIndex="99";display="none";width=height="0px";};
       if(document.all&&!g_IgnoreIE){tDiv.innerHTML='<iframe id="ifAddList" scrolling="no" marginwidth="0" marginheight="0" frameborder="1" height="100%" width="100%"></iframe>';};
       document.body.appendChild(tDiv);};
       g_AddListContainer=document.getElementById("dvAddListContainer");
       g_AddListContainer.style.left=(f_GetX(e)+1)+"px";
       g_AddListContainer.style.top=(f_GetY(e)+24)+"px";
       g_AddListContainer.style.display="";
       g_AddListContainer.appendChild(g_MainDiv);
       g_MainDiv.style.left=0;g_MainDiv.style.top=0;
       if(document.all&&!g_IgnoreIE){
        var ifr=document.getElementById("ifAddList");
       ifr.style.width=(oTb.offsetWidth+1)+"px";
       ifr.style.height=(oTb.offsetHeight+1)+"px";};};};
    function f_GetArrEmailList(event){
     if(g_InputObject==null){return null;};
     var s=g_InputObject.value;
     var k=s.length;
     var iLastSign=0;
     if(s.lastIndexOf(",")>s.lastIndexOf(";")){
      iLastSign=s.lastIndexOf(",");}else{iLastSign=s.lastIndexOf(";");};
      g_NewInnerTxt=s.substring(iLastSign+1,k);
      if(event.keyCode==8){
       g_NewInnerTxt=s.substring(iLastSign+1,k-1);};
       g_NewInnerTxt=f_Trim(g_NewInnerTxt);
       g_OldInnerTxt=s.substring(0,iLastSign);
       g_OldInnerTxt=f_Trim(g_OldInnerTxt);
       var arr=new Array();
       var re;
       var j=0;
       if(g_NewInnerTxt==""){
        if(event.keyCode==32)arr=gArrEmailAddress;}
        else{
        try{re=new RegExp("^"+g_NewInnerTxt,"i");
        for(var i=0;i<gArrEmailAddress.length;i++){
        if(re.test(gArrEmailAddress[i][0])||re.test(gArrEmailAddress[i][1])){
         arr[j]=gArrEmailAddress[i];j++;};
        };
        }
        catch(ex){};};
        return arr;};
    function f_EnterKey(){f_FillCurrentEmail();};
    function f_EscapeKey(){return;};
    function f_BackSpaceKey(obj,event){f_InitDivData(obj,event);if(g_NewInnerTxt==""){f_SetDivDisplay(false);}else{f_SetDivDisplay(true);};};function f_UpKey(){if(g_CurrentTd==null){return;};var k=g_CurrentTd.zIndex-1;if(k==-1){k+=1;};var oTd=document.getElementById("tdACMA_"+k);g_CurrentTd.className="";g_CurrentTd=oTd;g_CurrentTd.className=g_TdCssClassName;f_SetDivDisplay(true);};
    function f_DownKey(){
     if(g_CurrentTd==null){return;};
     var k=g_CurrentTd.zIndex+1;
     if(k==g_ArrEmailList.length){k-=1;};
     var oTd=document.getElementById("tdACMA_"+k);
     g_CurrentTd.className="";
     g_CurrentTd=oTd;g_CurrentTd.className=g_TdCssClassName;
     f_SetDivDisplay(true);};
     
    function f_Trim(str){str=str.replace(/(^\s*)|(\s*$)/g,"");return str;};
     
    <!--
    var addr_data = [];
    var ind = 7;
    addr_data[0] = ["小红帽1","[email protected]"];
    addr_data[1] = ["小红帽2","[email protected]"];
    addr_data[2] = ["小红帽3","[email protected]"];
    addr_data[3] = ["",""];
    addr_data[4] = ["aa小红帽3","[email protected]"];
    addr_data[5] = ["aa小红帽3","[email protected]"];
    addr_data[6] = ["bb小a帽3","[email protected]"];
    function initAddrData()
    {
     for(var i=0; i<addr_data.length; i++)
     {
      addr_data[i][0] = fTrim(addr_data[i][0]);
      addr_data[i][1] = addr_data[i][1].replace(/[^\w\.@-]/g,"");
     }
    }
    function fTrim(str)
    {
     str=str.replace(/(^\s*)|(\s*$$)/g, ""); 
     return str;
    }
    initAddrData();
    gArrEmailAddress=addr_data;
    //-->
        </script></head>
    <body>
        <style type="text/css">
            .autofinish
            {
                font-family: arial;
                font-size: 12px;
                background: #eeeeee;
                border: 1px solid #000000;
                padding: 2px;
                color: #0000cc;
            }
            .autofinish_over
            {
                background: #C4E4FF;
                font-size: 12px;
                margin: 5px;
                color: #0000cc;
            }
            .autofinish td
            {
                font-size: 12px;
            }
        </style>
        <input id="toInput" type="text" style="margin: 0; padding: 0; width: 80%; height: 20px!important;
            height: 25px;" autocomplete="off" name="to" onkeydown="return f_OnKeyDown(this,event)"
            onkeyup="f_OnKeyUp(this,event)" onblur="f_OnBlur();" tabindex="1" ondblclick="alert(this.value)"
            value="">    <script language="JavaScript">
        </script>    <label>
            双击获取值
        </label>
    </body>
    </html>