要实现的功能是在页面实现combobox(类似IE的地址栏)的功能,而且要能够写入cookie,下次启动的时候能够读取cookie,找到了一部分代码,但只能实现类似combobox的功能。请高手赐教,高分奉上。ComboBox.htc
<public:component tagname="ComboBox" literalcontent="true">
<public:method name="CreateComboBox" internalname="f_PublicCreateComboBox" />
<public:method name="CreateComboBoxIpt" internalname="f_PublicCreateComboBoxIpt" />
<public:method name="CreateDropDown" internalname="f_PublicCreateDropDown" />
<public:method name="CreateDropList" internalname="f_PublicCreateDropList" />
<public:method name="CreatePopup" internalname="f_PublicCreatePopup" /><public:attach event="oncontentready" onevent="f_CreateComboBox()" />
<SCRIPT LANGUAGE="JScript">
var oPopup = null;
var ComboBox = null;
var ComboBoxIpt = null;
var DropDown = null;
var DropList = null;
var aNodes = new Array();
function f_CreateComboBox()
{
 aNodes = f_CreateNodes(element.innerHTML);
 DropList = f_PublicCreateDropList();
 f_PublicCreateDropListData(aNodes);
 ComboBox = f_PublicCreateComboBox();
 ComboBoxIpt = f_PublicCreateComboBoxIpt();
 DropDown = f_PublicCreateDropDown();
 oPopup = f_PublicCreatePopup()
 ComboBox.attachEvent("onmouseover",fnMouseover);
 ComboBox.attachEvent("onmouseout",fnMouseout);
 DropDown.attachEvent("onmousedown",fnMousedown);
 ComboBoxIpt.attachEvent("onfocus",ComboBoxFocus);
 ComboBoxIpt.attachEvent("onblur",ComboBoxBlur);
 ComboBoxIpt.attachEvent("onkeyup",ComboBoxKeyup);
 window.document.attachEvent("onclick", chkstat);
}
function f_PublicCreateComboBox()
{
 var oTable = window.document.createElement("TABLE");
 oTable.cellSpacing = 1;
 oTable.cellPadding = 0;
 oTable.id = "AXTeamComboBox"+uniqueID;
 oTable.style.display = "inline";
 oTable.border = 0;
 oTable.bgColor = "#FFFFFF";
 element.insertAdjacentElement("BeforeBegin",oTable);
 oTable.ComboBoxFocus = false;
 return oTable;
}
function f_PublicCreateComboBoxIpt()
{
 var oInput = window.document.createElement("INPUT");
 oInput.type = "text";
 oInput.style.border = 0;
 oInput.style.width = element.width;
 oInput.style.height = 15;
 oInput.id = "AXTeamComboBoxIpt"+uniqueID;
 ComboBox.insertRow().insertCell().appendChild(oInput);
 ComboBox.rows[0].bgColor = "#FFFFFF";
 return oInput;
}
function f_PublicCreateDropDown()
{
 var oTable = window.document.createElement("TABLE");
 oTable.cellSpacing = 0;
 oTable.cellPadding = 0;
 oTable.id = "AXTeamDropDown"+uniqueID;
 oTable.border = 0;
 oTable.bgColor="#DBD8D1";
 oTable.style.cssText = "display:inline;cursor:default;";
 oTable.attachEvent("onselectstart", fnCancel);
 var otd = oTable.insertRow().insertCell();
 otd.style.cssText = "font-family: webdings;font-size:8px;text-align: center;width:13px;height:17px;";
 otd.innerText = "6";
 ComboBox.rows[0].insertCell().appendChild(oTable);
 return oTable;
}
function f_PublicCreateDropList()
{
 var oTable = window.document.createElement("TABLE");
 oTable.cellSpacing = 1;
 oTable.cellPadding = 0;
 oTable.border = 0;
 oTable.bgColor="#FFFFFF";
 oTable.style.cssText = "font-size:9pt;cursor:default;border:1px solid #666666;";
 oTable.attachEvent("onselectstart", fnCancel);
 return oTable;
}
function f_PublicCreateDropListData(aNodes,redata)
{
 if(!redata)
  var re=new RegExp("^");
 else
  var re=new RegExp("^"+redata,"i");
 var otd = null;
 var No=DropList.rows.length;
        for(i=0;i<No;i++)DropList.deleteRow();
 for(var i=0;i<aNodes.length;i++)
 {
  if(re.test(aNodes[i])==true)
  {
   otd = DropList.insertRow().insertCell();
   otd.style.height = "12px";
   otd.innerHTML = aNodes[i];
   otd.attachEvent("onmouseover",DropListOver);
   otd.attachEvent("onmouseout",DropListOut);
   otd.attachEvent("onclick",DropListClick);
  }
 }}
function f_PublicCreatePopup()
{
 var oSpan = element.document.createElement("span");
 oSpan.style.cssText = " position:absolute;display:none;cursor:default;z-index:100;";
 window.document.body.appendChild(oSpan);
 return oSpan;
}
function f_CreateNodes(htmlText)
{
 var oSpan = element.document.createElement("span");
 oSpan.innerHTML = htmlText;
 var xNodes = oSpan.childNodes;
 var Nodes = new Array();
 var nNumNodes = (xNodes == null) ? 0 : xNodes.length;
 for (var nIndex = 0; nIndex < nNumNodes; nIndex++)
 {
  var node = xNodes[nIndex];
  if (node != null)
   Nodes = Nodes.concat(f_CreateDropListItems(node));
 }
 return Nodes;
}
function f_CreateDropListItems(oNode)
{
 var rNodes;
 var szTagName = (oNode.tagName == null) ? "" : oNode.tagName.toLowerCase();
 if(szTagName == "option")
 {
  var szText = oNode.innerText;
  rNodes = new Array(szText);
 }
 else
  rNodes = new Array();
 return rNodes;
}
function fnMouseover()
{
 if(ComboBox.ComboBoxFocus) return;
 overstat();
}
function fnMouseout()
{
 if(ComboBox.ComboBoxFocus) return;
 defaultstat();
}
function fnMousedown()
{
 if(event.srcElement != ComboBoxIpt)
 {
  if(oPopup.style.display == '')
  {
   oPopup.style.display = 'none';
   DropDown.style.color = "#000000";
   return;
  }
  f_PublicCreateDropListData(aNodes)
  ComboBoxIpt.select();
  DropDown.style.color = "#FFFFFF";
 }
 oPopup.appendChild(DropList);
 oPopup.style.width = (oPopup.offsetWidth < ComboBox.offsetWidth) ? ComboBox.offsetWidth : oPopup.offsetWidth;
 oPopup.style.left = getx(ComboBox);
 oPopup.style.top = gety(ComboBox)+19;
 oPopup.style.display = '';
 oPopup.children[0].width = "100%";
 ComboBox.ComboBoxFocus = true;
}
function overstat()
{
 ComboBox.bgColor="#0A246A";
 DropDown.bgColor="#B6BDD2";
 DropDown.style.color = "#000000";
}
function defaultstat()
{
 ComboBox.bgColor="#FFFFF";
 DropDown.bgColor="#DBD8D1";
 DropDown.style.color = "#000000";
}
function DropListOver()
{
 obj = event.srcElement;
 obj.bgColor='highlight';obj.style.color='#FFFFFF';obj.style.cursor='default';
}
function DropListOut()
{
 obj = event.srcElement;
 obj.bgColor='#FFFFFF';obj.style.color='#000000';
}
function DropListClick()
{
 obj = event.srcElement;
 ComboBoxIpt.value = obj.innerText;
 oPopup.style.display = "none";
 ComboBoxIpt.select();
 DropDown.style.color = '#000000';
}
function ComboBoxFocus()
{
 if(ComboBox.ComboBoxFocus) return;
 ComboBox.ComboBoxFocus = true;
 overstat();
}
function ComboBoxBlur()
{
 if(ComboBox.ComboBoxFocus) return;
 defaultstat();
}
function ComboBoxKeyup()
{
 f_PublicCreateDropListData(aNodes,ComboBoxIpt.value);
 fnMousedown();
 addOption();
}
function addOption(){
 if(event.keyCode==13)
 {
 aNodes[aNodes.length] = ComboBoxIpt.value;
 }  
}function chkstat()
{
 var oEl = event.srcElement;
 while( null != oEl && oEl != ComboBox)
 {
  oEl = oEl.parentElement;
 }
 if(oEl == null)
 {
  defaultstat();
  ComboBox.ComboBoxFocus = false;
  oPopup.style.display = "none";
 }
}function fnCancel()
{
 return false;
}
function getx(e)
{
 var l=e.offsetLeft;
 while(e=e.offsetParent){
  l+=e.offsetLeft;
 }
 return l;
}
function gety(e)
{
 var t=e.offsetTop;
 while(e=e.offsetParent){
  t+=e.offsetTop;
 }
 return t;
}
</SCRIPT>index.htm
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN">
<HTML>
<HEAD>
<TITLE> 类似于ie地址栏的下拉列表:回车提交,动态提示</TITLE>
<meta http-equiv="Content-Type" content="text/html; charset=gb2312">
</HEAD><BODY bgcolor="menu">
类似于ie地址栏的下拉列表:回车提交,动态提示
<?XML:NAMESPACE PREFIX="AXTeam" />
<?IMPORT NAMESPACE="AXTeam" IMPLEMENTATION="ComboBox.htc" />
<AXTeam:ComboBox id="ComboBox1" width='200'> <AXTeam:option>雪候鸟</AXTeam:option>
 <AXTeam:option>http://www.51.net</AXTeam:option>
 <AXTeam:option>http://csdn.net</AXTeam:option>
 <AXTeam:option>雪地冰天</AXTeam:option>
 <AXTeam:option>file://C:</AXTeam:option>
 <AXTeam:option>C:\winnt</AXTeam:option></AXTeam:ComboBox>
</BODY>
</HTML>

解决方案 »

  1.   

    htm不用改,HTC改下,代码如下,内容太长分开回复
    <public:component tagname="ComboBox" literalcontent="true">
    <public:method name="CreateComboBox" internalname="f_PublicCreateComboBox" />
    <public:method name="CreateComboBoxIpt" internalname="f_PublicCreateComboBoxIpt" />
    <public:method name="CreateDropDown" internalname="f_PublicCreateDropDown" />
    <public:method name="CreateDropList" internalname="f_PublicCreateDropList" />
    <public:method name="CreatePopup" internalname="f_PublicCreatePopup" /><public:attach event="oncontentready" onevent="f_CreateComboBox()" />
    <SCRIPT LANGUAGE="JScript">
    var oPopup = null;
    var ComboBox = null;
    var ComboBoxIpt = null;
    var DropDown = null;
    var DropList = null;
    var aNodes = new Array();
    function f_CreateComboBox()
    {
     aNodes = f_CreateNodes(element.innerHTML);
     DropList = f_PublicCreateDropList();
     f_PublicCreateDropListData(aNodes);
     ComboBox = f_PublicCreateComboBox();
     ComboBoxIpt = f_PublicCreateComboBoxIpt();
     DropDown = f_PublicCreateDropDown();
     oPopup = f_PublicCreatePopup()
     ComboBox.attachEvent("onmouseover",fnMouseover);
     ComboBox.attachEvent("onmouseout",fnMouseout);
     DropDown.attachEvent("onmousedown",fnMousedown);
     ComboBoxIpt.attachEvent("onfocus",ComboBoxFocus);
     ComboBoxIpt.attachEvent("onblur",ComboBoxBlur);
     ComboBoxIpt.attachEvent("onkeyup",ComboBoxKeyup);
     window.document.attachEvent("onclick", chkstat);
    }
    function f_PublicCreateComboBox()
    {
     var oTable = window.document.createElement("TABLE");
     oTable.cellSpacing = 1;
     oTable.cellPadding = 0;
     oTable.id = "AXTeamComboBox"+uniqueID;
     oTable.style.display = "inline";
     oTable.border = 0;
     oTable.bgColor = "#FFFFFF";
     element.insertAdjacentElement("BeforeBegin",oTable);
     oTable.ComboBoxFocus = false;
     return oTable;
    }
    function f_PublicCreateComboBoxIpt()
    {
     var oInput = window.document.createElement("INPUT");
     oInput.type = "text";
     oInput.style.border = 0;
     oInput.style.width = element.width;
     oInput.style.height = 15;
     if(GetCookie('sNameValue'))
     oInput.value=GetCookie('sNameValue');
     oInput.id = "AXTeamComboBoxIpt"+uniqueID;
     ComboBox.insertRow().insertCell().appendChild(oInput);
     ComboBox.rows[0].bgColor = "#FFFFFF";
     return oInput;
    }
    function f_PublicCreateDropDown()
    {
     var oTable = window.document.createElement("TABLE");
     oTable.cellSpacing = 0;
     oTable.cellPadding = 0;
     oTable.id = "AXTeamDropDown"+uniqueID;
     oTable.border = 0;
     oTable.bgColor="#DBD8D1";
     oTable.style.cssText = "display:inline;cursor:default;";
     oTable.attachEvent("onselectstart", fnCancel);
     var otd = oTable.insertRow().insertCell();
     otd.style.cssText = "font-family: webdings;font-size:8px;text-align: center;width:13px;height:17px;";
     otd.innerText = "6";
     ComboBox.rows[0].insertCell().appendChild(oTable);
     return oTable;
    }
    function f_PublicCreateDropList()
    {
     var oTable = window.document.createElement("TABLE");
     oTable.cellSpacing = 1;
     oTable.cellPadding = 0;
     oTable.border = 0;
     oTable.bgColor="#FFFFFF";
     oTable.style.cssText = "font-size:9pt;cursor:default;border:1px solid #666666;";
     oTable.attachEvent("onselectstart", fnCancel);
     return oTable;
    }
    function f_PublicCreateDropListData(aNodes,redata)
    {
     if(!redata)
      var re=new RegExp("^");
     else
      var re=new RegExp("^"+redata,"i");
     var otd = null;
     var No=DropList.rows.length;
            for(i=0;i<No;i++)DropList.deleteRow();
     for(var i=0;i<aNodes.length;i++)
     {
      if(re.test(aNodes[i])==true)
      {
       otd = DropList.insertRow().insertCell();
       otd.style.height = "12px";
       otd.innerHTML = aNodes[i];
       otd.attachEvent("onmouseover",DropListOver);
       otd.attachEvent("onmouseout",DropListOut);
       otd.attachEvent("onclick",DropListClick);
      }
     }}
    function f_PublicCreatePopup()
    {
     var oSpan = element.document.createElement("span");
     oSpan.style.cssText = " position:absolute;display:none;cursor:default;z-index:100;";
     window.document.body.appendChild(oSpan);
     return oSpan;
    }
    function f_CreateNodes(htmlText)
    {
     var oSpan = element.document.createElement("span");
     oSpan.innerHTML = htmlText;
     var xNodes = oSpan.childNodes;
     var Nodes = new Array();
     var nNumNodes = (xNodes == null) ? 0 : xNodes.length;
     for (var nIndex = 0; nIndex < nNumNodes; nIndex++)
     {
      var node = xNodes[nIndex];
      if (node != null)
       Nodes = Nodes.concat(f_CreateDropListItems(node));
     }
     return Nodes;
    }
    function f_CreateDropListItems(oNode)
    {
     var rNodes;
     var szTagName = (oNode.tagName == null) ? "" : oNode.tagName.toLowerCase();
     if(szTagName == "option")
     {
      var szText = oNode.innerText;
      rNodes = new Array(szText);
     }
     else
      rNodes = new Array();
     return rNodes;
    }
    function fnMouseover()
    {
     if(ComboBox.ComboBoxFocus) return;
     overstat();
    }
    function fnMouseout()
    {
     if(ComboBox.ComboBoxFocus) return;
     defaultstat();
    }
    function fnMousedown()
    {
     if(event.srcElement != ComboBoxIpt)
     {
      if(oPopup.style.display == '')
      {
       oPopup.style.display = 'none';
       DropDown.style.color = "#000000";
       return;
      }
      f_PublicCreateDropListData(aNodes)
      ComboBoxIpt.select();
      DropDown.style.color = "#FFFFFF";
     }
     oPopup.appendChild(DropList);
     oPopup.style.width = (oPopup.offsetWidth < ComboBox.offsetWidth) ? ComboBox.offsetWidth : oPopup.offsetWidth;
     oPopup.style.left = getx(ComboBox);
     oPopup.style.top = gety(ComboBox)+19;
     oPopup.style.display = '';
     oPopup.children[0].width = "100%";
     ComboBox.ComboBoxFocus = true;
    }
    function overstat()
    {
     ComboBox.bgColor="#0A246A";
     DropDown.bgColor="#B6BDD2";
     DropDown.style.color = "#000000";
    }
    function defaultstat()
    {
     ComboBox.bgColor="#FFFFF";
     DropDown.bgColor="#DBD8D1";
     DropDown.style.color = "#000000";
     document.cookie = "sNameValue="+parent.document.getElementById("AXTeamComboBoxIpt"+uniqueID).value+";";
    }
    function DropListOver()
    {
     obj = event.srcElement;
     obj.bgColor='highlight';obj.style.color='#FFFFFF';obj.style.cursor='default';
    }
    function DropListOut()
    {
     obj = event.srcElement;
     obj.bgColor='#FFFFFF';obj.style.color='#000000';
    }
    function DropListClick()
    {
     obj = event.srcElement;
     ComboBoxIpt.value = obj.innerText;
     oPopup.style.display = "none";
     ComboBoxIpt.select();
     DropDown.style.color = '#000000';
    }
    function ComboBoxFocus()
    {
     if(ComboBox.ComboBoxFocus) return;
     ComboBox.ComboBoxFocus = true;
     overstat();
    }
    function ComboBoxBlur()
    {
     if(ComboBox.ComboBoxFocus) return;
     defaultstat();
    }
    function ComboBoxKeyup()
    {
     f_PublicCreateDropListData(aNodes,ComboBoxIpt.value);
     fnMousedown();
     addOption();
    }
    function addOption(){
     if(event.keyCode==13)
     {
     aNodes[aNodes.length] = ComboBoxIpt.value;
     }  
    }
      

  2.   


    function chkstat()
    {
     var oEl = event.srcElement;
     while( null != oEl && oEl != ComboBox)
     {
      oEl = oEl.parentElement;
     }
     if(oEl == null)
     {
      defaultstat();
      ComboBox.ComboBoxFocus = false;
      oPopup.style.display = "none";
     }
    }function fnCancel()
    {
     return false;
    }
    function getx(e)
    {
     var l=e.offsetLeft;
     while(e=e.offsetParent){
      l+=e.offsetLeft;
     }
     return l;
    }
    function gety(e)
    {
     var t=e.offsetTop;
     while(e=e.offsetParent){
      t+=e.offsetTop;
     }
     return t;
    }
    function SetCookie(name,value){
         var argv=SetCookie.arguments;
         var argc=SetCookie.arguments.length;
      //一天过期
     var expires = new Date();
        // var expires=(2<argc)?argv[2]:null;
         var path=(3<argc)?argv[3]:null;
         var domain=(4<argc)?argv[4]:null;
         var secure=(5<argc)?argv[5]:false;
     expires.setDate(expires.getDate()+1);    alert(expires);  // 加一天     parent.document.cookie=name+"="+escape(value)+((expires==null)?"":("; expires="+expires))+((path==null)?"":("; path="+path))+((domain==null)?"":("; domain="+domain))+((secure==true)?"; secure":"");
    }
    function GetCookie(name)
    //获得Cookie的原始值
    {
    var arg = name + "=";
    var alen = arg.length;
    var clen = document.cookie.length;
    var i = 0;
    while (i < clen)
    {
    var j = i + alen;
    if (document.cookie.substring(i, j) == arg)
    return GetCookieVal (j);
    i = document.cookie.indexOf(" ", i) + 1;
    if (i == 0) break;
    }
    return null;
    }
    function GetCookieVal(offset)
    //获得Cookie解码后的值
    {
    var endstr = document.cookie.indexOf (";", offset);
    if (endstr == -1)
    endstr = document.cookie.length;
    return unescape(document.cookie.substring(offset, endstr));
    }
    </SCRIPT>