解决 动态生成div,被select挡住的问题。。

注意：
<iframe   id='ifmout' style='position:absolute;z-index:0;width:expression(this.nextSibling.offsetWidth);height:expression(this.nextSibling.offsetHeight);top:expression(this.nextSibling.offsetTop);left:expression(this.nextSibling.offsetLeft);'   frameborder='0'   ></iframe>
很多资料都写-1，，

这是浏览器IE7版本之前会出现的问题，IE7,是不会有这个问题的啦。。
哈哈哈。。这是，整理后的代码。。防止自己忘了。做个备份啦。。
再次，感谢老公的帮助哟。
在生成div时，先生成的Ifame，在移除DIV时，也要移除ifame......



<script>
var inputname;
var now;//
var menuFocusIndex;  //当前选中行
var arrylist;//当前返回数组
var resultlength=0;//当前数组长度
function getPosition(obj)//获取当前操作坐标
{
    var top = 0,left = 0;
    do
    {
       top += obj.offsetTop;
       left += obj.offsetLeft;
    }
    while ( obj = obj.offsetParent );     
    var arr = new Array();     
    arr[0] = top;
    arr[1] = left;   
    return arr;   
}
function createMenu(result)//生成div
{ 
    var textBox=inputname;
    var menuid="divout";
    var divouter;
   if( document.getElementById(menuid) == null )
   {
    ifm=document.createElement("<iframe   id='ifmout' style='position:absolute;z-index:0;width:expression(this.nextSibling.offsetWidth);height:expression(this.nextSibling.offsetHeight);top:expression(this.nextSibling.offsetTop);left:expression(this.nextSibling.offsetLeft);'   frameborder='0'   ></iframe>");
        var left_new=getPosition(textBox)[1];
        var top_new=getPosition(textBox)[0];   
        var newControl = document.createElement("div");
        newControl.id = menuid;
  document.body.appendChild(ifm);
        document.body.appendChild(newControl);
        newControl.style.position = "absolute";
        newControl.style.border = "solid 1px #0000CC";
        newControl.style.backgroundColor = "#FFFFFF";
        newControl.style.width = 350 + "px";
        newControl.style.left = left_new + "px";        
        newControl.style.top = top_new+ 2 +20+ "px";
        try{
        newControl.style.font=14+"px";}
        catch(err){}
        divouter= newControl;
   }
   else
      divouter= document.getElementById( menuid );
   divouter.innerHTML =result;
}
function createMenuBody(resultlist)//根据返回数组生成div中行
{
    var result="";
    var j = 0;
    arr = resultlist;
arrylist =arr;
    if(arr.length > 10)
    {
        j = 10;
    }
    else
    {
       j = arr.length;
    }
    resultlength=j;
   if(j >0)
   { 
        for ( var i = 0; i < j; i++ ){
          arrtab = arr[i].childNodes;
          text1 ="";
          text2 ="";
          text3 ="";
          if(arrtab.length>=1)text1 = arrtab[0].childNodes[0]==null?"":arrtab[0].childNodes[0].nodeValue;
          if(arrtab.length>=2)text2 = arrtab[1].childNodes[0]==null?"":arrtab[1].childNodes[0].nodeValue;
          if(arrtab.length>=3)text3 = arrtab[2].childNodes[0]==null?"":arrtab[2].childNodes[0].nodeValue;
          result += "<table border='0' cellpadding='2' cellspacing='0' id='menuItem"+(i+1)+"' onmouseover='forceMenuItem( "+(i+1)+");'width='100%' onclick='givNumber("+i+");'><tr><td align='left' width='100px'>" + text1+ "</td><td align='left' width='180px'>" + text2+ "</td><td align='left' width='70px'>" + text3+ "</td></tr></table>";
    createMenu(result);
  }
   }
   else
   {
        var div = document.getElementById("divout");
   if(div)div.parentNode.removeChild(div); 
  var ifm = document.getElementById("ifmout");
   if(ifm)document.body.removeChild(ifm);
   }
}
function forceMenuItem(index)//div中颜色变化
{
    lastMenuItem = document.getElementById("menuItem" + menuFocusIndex);
    if (lastMenuItem != null)
    {
        lastMenuItem.style.backgroundColor="white";      
        lastMenuItem.style.color="#000000";
    }
    var menuItem = document.getElementById("menuItem" + index);
    if (menuItem == null)
    {
        document.getElementById("txt1").focus();
    }
    else
    {
        menuItem.style.backgroundColor = "#5555CC";
        menuItem.style.color = "#FFFFFF";
        menuFocusIndex = index;
    }
}
function givNumber(index)//赋值移除div
{
inputname.value =  arrylist[index].childNodes[0].childNodes[0].nodeValue ;
    inputname.focus();
    var div = document.getElementById("divout");
  if(div)div.parentNode.removeChild(div); 
var ifm = document.getElementById("ifmout");
  if(ifm)document.body.removeChild(ifm);
    menuFocusIndex=null;              
}
function catchKeyBoard()//按键事件
{
   var keyNumber = event.keyCode;
   if(document.getElementById("divout")==null){
  return;
   }
   if(keyNumber=='40') //向下
   {    
            if (menuFocusIndex==null) //当焦点在文本框中间时，按向下跳到第一个主体。
            {
               forceMenuItem(1);
            }
            else if(menuFocusIndex==resultlength)//当焦点超出界限时跳转到第一个主体
            {
               forceMenuItem(1);
            }
            else
            {
               forceMenuItem(menuFocusIndex+1); //焦点增加1
            }
   }
   else if(keyNumber=='38')//向上
   {
  
        if(menuFocusIndex==1)
         {
            forceMenuItem(resultlength);
         }else if(menuFocusIndex == null){
           forceMenuItem(1); //焦点1
  }else
        {
           forceMenuItem(menuFocusIndex-1); //焦点减少1
        }
  }
  else if(keyNumber=='13')
  {
        givNumber(menuFocusIndex-1);
  }
}
function DisplayUserInformation(obj,tonow)//ajax方法调用
{
now = tonow;
inputname=obj;
   var keyNumber = event.keyCode;
   if(keyNumber=='40'||keyNumber=='38'||keyNumber=='13')
  catchKeyBoard();
   else//调用ajax
   {
       var url = "";
       var canshu=inputname.value;
       if(canshu!="")
       {
   ajaxStart(canshu);  
       }
       else
       {
        var div = document.getElementById("divout");
           if(div)div.parentNode.removeChild(div); 
  var ifm = document.getElementById("ifmout");
     if(ifm)document.body.removeChild(ifm);
    
       }
   }
}
function InputOnBlur()//失去焦点
{   
  setTimeout("InputOnBlurTimeOut()",300);
}
function InputOnBlurTimeOut()//失去焦点
{   
  menuFocusIndex=null;
        var div = document.getElementById("divout");
   if(div)div.parentNode.removeChild(div); 
  var ifm = document.getElementById("ifmout");
   if(ifm)document.body.removeChild(ifm);
}
//ajax
var XmlHttpObject;
function StateEvent()
{

if(XmlHttpObject.readyState == 4)
{
if(XmlHttpObject.status == 200)
{
xmlDoc=XmlHttpObject.responseXML.documentElement;
result=xmlDoc.getElementsByTagName("Sssq");

if(result.length==0){
  inputobj = inputname;
  inputobj.value=inputobj.value.substring(0,inputobj.value.length-1);
}else{
  createMenuBody(result);
}

result=xmlDoc.getElementsByTagName("ZhiYe");
if(result.length==0){
  inputobj = inputname;
  inputobj.value=inputobj.value.substring(0,inputobj.value.length-1);
}else{
  createMenuBody(result);
}
}
}
}
function CreateXmlHttp()
{
if(window.ActiveXObject)
{
return new ActiveXObject("Microsoft.XMLHTTP");
}
else if (window.XMLHttpRequest)
{
return new XmlHttpRequest();
}
}
function ajaxStart(q)
{
var ParamString = "q="+q+"&now="+now;
XmlHttpObject = CreateXmlHttp();
XmlHttpObject.onreadystatechange = StateEvent;
XmlHttpObject.open("post","ajaxjsp.jsp",true);
XmlHttpObject.setRequestHeader("Content-Type","application/x-www-form-urlencoded;"); //设置服务器响应请求体参数
XmlHttpObject.send(ParamString);
}
</script>

评论

6 楼 catlovefox 2009-02-02  

大家仔细看哟，我是用的ajax，自动画得div,所以显得代码多了。。其实最关键的只有2句代码而已啦。。

5 楼 kimmking 2009-01-12  

激活的传统activex，iframe压根挡不住。

hidden的比较通用的流行的方案，跟其他两个方案比可以减少内存泄露。

4 楼 hanjs 2009-01-12  

kimmking 写道

hanjs 写道

这个方法不仅仅可以解决这个问题，而且还可以处理div无法遮挡住activex控件的问题。

ie6的著名bug：
select iframe object这三个标记不同于其他html控件，
一般情况下zindex不起作用。
嵌套div在iframe的方法可以解决select的问题。好像不能解决activex。

还有两种常用的方法：
1、放到object标记的src里，这个可以解决这三种组件的问题。
2、计算弹出的div的范围内的这三种组件，hidden掉（比如jsf的apache myface tomhawk里的menu这么做的）。

我不指定你所指的是什么控件，反正我这边能达到我要的目的，就是利用上面的方法可以挡住Object。

因为我们要用这个控件显示内容，填报的数据。如果hidden了，不是很适合。

3 楼 congjl2002 2009-01-11  

还是hidden掉这些控件比较方便吧，代码量应该是你的十分之一都不到

2 楼 kimmking 2009-01-11  

hanjs 写道

这个方法不仅仅可以解决这个问题，而且还可以处理div无法遮挡住activex控件的问题。

ie6的著名bug：
select iframe object这三个标记不同于其他html控件，
一般情况下zindex不起作用。
嵌套div在iframe的方法可以解决select的问题。好像不能解决activex。

还有两种常用的方法：
1、放到object标记的src里，这个可以解决这三种组件的问题。
2、计算弹出的div的范围内的这三种组件，hidden掉（比如jsf的apache myface tomhawk里的menu这么做的）。

1 楼 hanjs 2009-01-11  

这个方法不仅仅可以解决这个问题，而且还可以处理div无法遮挡住activex控件的问题。