一個JavaSript信息提示框的實現

在很多時候我們需要在一個Html控件獲得光標的時候在控件旁邊顯示一個提示框，實現這個關鍵在於怎麼定位當前控件的位置。這個位置可以是相對於瀏覽器左上角窗口的x,y座標，也可以是相對於Body的X，Y座標。相對於第一種方法，第二種方法實現起來會方便些，因爲要獲得相對於瀏覽器坐上窗口x,y座標是比較繁瑣在，在不同瀏覽器下面。

 

現在讓我來講一下，第二種方法我的實現

 

兩個比較重要的方法  第一，通過：HtmlObject.OffsetLeft   HtmlObject.offsetTop 來獲得HTML控件相對於它的offsetParent 的x和y的距離。  然後，我們遍歷offsetParent，將x,y距離相加。最終就得到了控件相對於body 的x，y的距離了。

 

最後我們通過用JavaScript創建一個Div，將提示內容鍵入到裏面，再將Div 通過 appendChild方法加到Html文檔的最下面，通過CSS 的positon:absolute 和 left top屬性定位控件相對於最近的Body這個 parentElement 的x,y距離。

 

 

這裏要說的是，雖然不同的瀏覽器對offsetParent的定義有不同，但是我們取的offsetLeft 和offsetTop 相對於Body 是準確的。

 

演示效果： 

 

 

 

主要的關鍵代碼：

//通過循環獲得 相對於 Body left和top的距離 function getPos(oArg) { var oPos = new Object(); oPos.x = oArg.offsetLeft; oPos.y = oArg.offsetTop; while (oArg.tagName.toLocaleLowerCase() != "body" && oArg.tagName.toLocaleLowerCase() != "html") { oArg = oArg.offsetParent; oPos.x += oArg.offsetLeft; oPos.y += oArg.offsetTop; } return oPos;//返回對象 }

 

 

//顯示提示框 function showHere() { var oInput = document.getElementsByTagName("input")[1];//找到我們要顯示提示框的那個控件對象 oDiv = document.createElement("div"); //設置CSS屬性 oDiv.style.border = "1px solid black"; oDiv.style.background = "#FFC436"; oDiv.style.position = "absolute"; oDiv.style.width = oInput.offsetWidth+"px"; oDiv.style.fontSize = "12px"; oDiv.style.textAlign = "left"; var oText = document.createTextNode("友情提示友情提示友情提示友情提示友情提示友情提示友情提示友情提示"); oDiv.appendChild(oText);//將要顯示的內容加入到Div中 document.body.appendChild(oDiv);/*將節點加入到*/ //下面是控制顯示座標 var oPos = getPos(arguments[1]); oDiv.style.left = oPos.x + "px"; /*Input控件的X座標*/ oDiv.style.top = oPos.y + oInput.offsetHeight + "px"; /*控件的Y座標+input高度*/ }

 

//刪除DOM節點 function OutHere() { document.body.removeChild(oDiv); }

 

 

 

下面給出全部的Html文件代碼，裏面附件了點其它的代碼，但是不影響閱讀：

 

<textarea cols="50" rows="15" name="code" class="xhtml">&lt;!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"&gt; &lt;html xmlns="http://www.w3.org/1999/xhtml"&gt; &lt;head&gt; &lt;title&gt;JS測試&lt;/title&gt; &lt;mce:script language="javascript" type="text/javascript"&gt;&lt;!-- //JS創建Html table function Create() { var oTable = document.createElement("table"); oTable.style.border = "1px solid red"; var oTbody = document.createElement("tbody"); oTable.appendChild(oTbody); oTbody.insertRow(0); var oRows0Cell0 = oTbody.rows[0].insertCell(0); oRows0Cell0.style.border = "1px solid blue"; oTbody.rows[0].cells[0].appendChild(document.createTextNode("呵呵")); oTbody.rows[0].insertCell[1]; oTbody.rows[0].cells[0].appendChild(document.createTextNode("哈哈")); document.body.appendChild(oTable); } //通過循環獲得 相對於 Body left和top的距離 function getPos(oArg) { var oPos = new Object(); oPos.x = oArg.offsetLeft; oPos.y = oArg.offsetTop; while (oArg.tagName.toLocaleLowerCase() != "body" &amp;&amp; oArg.tagName.toLocaleLowerCase() != "html") { oArg = oArg.offsetParent; oPos.x += oArg.offsetLeft; oPos.y += oArg.offsetTop; } return oPos;//返回對象 } //這個全局變量用來記錄我們創建的Div 這個節點 var oDiv; //顯示提示框 function showHere() { var oInput = document.getElementsByTagName("input")[1];//找到我們要顯示提示框的那個控件對象 oDiv = document.createElement("div"); //設置CSS屬性 oDiv.style.border = "1px solid black"; oDiv.style.background = "#FFC436"; oDiv.style.position = "absolute"; oDiv.style.width = oInput.offsetWidth+"px"; oDiv.style.fontSize = "12px"; oDiv.style.textAlign = "left"; var oText = document.createTextNode("友情提示友情提示友情提示友情提示友情提示友情提示友情提示友情提示"); oDiv.appendChild(oText);//將要顯示的內容加入到Div中 document.body.appendChild(oDiv);/*將節點加入到*/ //下面是控制顯示座標 var oPos = getPos(arguments[1]); oDiv.style.left = oPos.x + "px"; /*Input控件的X座標*/ oDiv.style.top = oPos.y + oInput.offsetHeight + "px"; /*控件的Y座標+input高度*/ } //刪除DOM節點 function OutHere() { document.body.removeChild(oDiv); } // --&gt;&lt;/mce:script&gt; &lt;/head&gt; &lt;body style=" text-align:center;" mce_style=" text-align:center;"&gt; &lt;div style="border: 1px solid red; height:500px; padding-left:100px; background-color:black; "&gt; &lt;input type="button" value="生成" onclick="Create();" /&gt; &lt;div style="width: 300px; height:200px; border: 1px solid blue; position:absolute; top:150px; left:200px; background-color:Gray;" &gt; &lt;input type="text" style="position:relative; top:100px; " name="try" onfocus="showHere(event,this);" onblur="OutHere();" /&gt; &lt;/div&gt; &lt;/div&gt; &lt;/body&gt; &lt;/html&gt; </textarea>

 

 

附件一個網上找到的比較經典的圖片：