按我的看法,你可以先做一个预留的DIV,并不一定要创建吧。然后我给几段JS吧。function GetElementLeft (Element_Obj){//获取元的绝对横坐标
offset = Element_Obj.offsetLeft;
if (Element_Obj.offsetParent != null){
offset += GetElementLeft(Element_Obj.offsetParent);
}
return offset;
}
function GetElementTop (Element_Obj){//获取元素绝对纵坐标
offset = Element_Obj.offsetTop;
if (Element_Obj.offsetParent != null){
offset += GetElementTop(Element_Obj.offsetParent);
}
return offset;
}
function ShowDiv (Div_ID, Input_ID, Place, MovesRight, MovesDown){//显示DIV
document.getElementById(Div_ID).style.display = "block";
Input_Obj = document.getElementById(Input_ID);
Input_Top = GetElementTop (Input_Obj);
Input_Left = GetElementLeft (Input_Obj);
Input_Width = document.getElementById(Input_ID).offsetWidth;
Input_Height = document.getElementById(Input_ID).offsetHeight;
Div_Width = document.getElementById(Div_ID).offsetWidth;
Div_Height = document.getElementById(Div_ID).offsetHeight;
switch (Place){
case "top":
document.getElementById(Div_ID).style.left = Input_Left + MovesRight + "px";
document.getElementById(Div_ID).style.top = Input_Top - Div_Height + MovesDown + "px";
break;
case "right":
document.getElementById(Div_ID).style.left = Input_Left + Input_Width + MovesRight + "px";
document.getElementById(Div_ID).style.top = Input_Top + MovesDown + "px";
break;
case "bottom":
document.getElementById(Div_ID).style.left = Input_Left + MovesRight + "px";
document.getElementById(Div_ID).style.top = Input_Top + Input_Height + MovesDown + "px";
break;
case "left":
document.getElementById(Div_ID).style.left = Input_Left - Div_Width + MovesRight + "px";
document.getElementById(Div_ID).style.top = Input_Top + MovesDown + "px";
break;
case "in":
document.getElementById(Div_ID).style.left = Input_Left + Input_Width - Div_Width + MovesRight + "px";
document.getElementById(Div_ID).style.top = Input_Top + MovesDown + "px";
break;
}
}
具体使用方法就是<input type="text" id="text_id" onfocus="ShowDiv('text_id', 'div_id', 'bottom', 0, 0)" />
<div id="div_id" style="display:none;position:absolute;"></div>

解决方案 »

  1.   

    <style type="text/css">
    .text{ width:200px; height:150px; border:1px solid #000000;  position:absolute; display:inline; background-color:#FFFF99}
    </style>
    <body>
    <div style="width:500px;height:500px; padding:50px 0 0 50px;border:1px solid #000000;"><div style="width:500px;height:500px; padding:50px 0 0 50px;border:1px solid #000000;">
    <input id="text"type="text" Onfocus="show(this)"/></div></div></body>
    <script>
    function show(e){
    var height = e.offsetHeight
    var left=e.offsetLeft
    var top=e.offsetTop
     while (e=e.offsetParent) {
     left += e.offsetLeft;
     top += e.offsetTop;
     };
     var div =document.createElement("div")
     div.className="text"
     div.style.left=left+"px"
     div.style.top=top+height+"px"
     document.body.appendChild(div)
    }
    </script>
      

  2.   

    function crediv(obj){
    var newdiv = document.createElement("div"); 
    newdiv.id="div1"
    newdiv.style.border="1px solid #92B0DD"; 
    newdiv.style.width=obj.offsetWidth+"px";
    newdiv.style.height=obj.offsetHeight+"px";
    newdiv.style.top=obj.offsetHeight+"px";
    document.getElementById('div45').appendChild(newdiv);
    }<div id="div45">
    <input name="name" type="text" onfocus="crediv(this)" id="inp">
    </div>
      

  3.   

    1 最好获取绝对左边距和上边距
    2 如果层存在,则将其display状态改变为block;否则创建一个新的div
    代码如下://获得绝对顶边距
    function getTop(e){
    var ost = e.offsetTop;
    while(e=e.offsetParent){
    ost += e.offsetTop;
    }
    return ost;
    }
    //获得绝对左边距
    function getLeft(e){
    var osl = e.offsetLeft;
    while(e=e.offsetParent){
    osl += e.offsetLeft;
    }
    return osl;
    }
    //打开层或者创建层
    function openDiv(obj, divId) {
    var opDiv = document.getElementById(divId);
    var offLeft = parseInt(getLeft(obj)), offTop = obj.offsetHeight + parseInt(getTop(obj));
    if(!opDiv){
    opDiv = document.createElement('div');  //创建层
    opDiv.id = divId;
    opDiv.className = 'suggest';  //设置css样式
    opDiv.style.display = 'block';
    document.body.appendChild(opDiv);
    }else{
    opDiv.style.display = 'block';
    }
    opDiv.style.top = offTop;
    opDiv.style.left = offLeft;
    opDiv.style.zIndex = '99';
    opDiv.style.position = 'absolute';
    opDiv.style.cursor = 'default';
    opDiv.style.width = obj.offsetWidth;  //设置层的宽度和text一样宽}