按我的看法,你可以先做一个预留的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>
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>
.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>
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>
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一样宽}