【實(shí)例名稱】

文本框獲取焦點(diǎn)彈出下拉框

【實(shí)例描述】

為了避免用戶輸人錯誤，很多文本框(例如城市、國家等)不允許用戶輸入，而是彈出下拉框讓用戶直接選擇。本例就學(xué)習(xí)如何讓文本框獲得焦點(diǎn)時，自動彈出下拉框供用戶選擇。

【實(shí)例代碼】

<script LANGUAGE="JavaScript">
var oRegion = document.getElementById("txtRegion");   //需要彈出下拉列表的文本框
var oDivList = document.getElementById("divList"); //要彈出的下拉列表
var oClose = document.getElementById("tdClose");　　　//關(guān)閉div的單元格，也可使用按鈕實(shí)現(xiàn)
var colOptions = document.getElementsByTagName("li"); //所有列表元素
var bNoAdjusted = true;
oClose.onclick = function()
{
    oDivList.style.display = "none";　　//隱藏div，實(shí)現(xiàn)關(guān)閉下拉框的效果
};
//設(shè)置下列選擇項(xiàng)的一些事件
for (var i=0; i<colOptions.length; i++)
{
    colOptions[i].style.cursor = "hand";
    colOptions[i].onclick = function()　　　//為列表項(xiàng)添加單擊事件
    {
        oRegion.value = this.innerText;
    };
    colOptions[i].onmouseover = function()　//為列表項(xiàng)添加鼠標(biāo)移動事件
    {
        this.style.backgroundColor = "#ffff00";
    };
    colOptions[i].onmouseout = function()  //為列表項(xiàng)添加鼠標(biāo)移走事件
    {
        this.style.backgroundColor = "";
    };
}
//文本獲得焦點(diǎn)時的事件
oRegion.onfocus = function()
{
    oDivList.style.display = "block";
    if (bNoAdjusted)　　//控制div是否已經(jīng)顯示的變量
    {
        bNoAdjusted = false;
        //設(shè)置下拉列表的寬度和位置
        oDivList.style.width = this.offsetWidth + 50;
        oDivList.style.posTop = oDivList.offsetTop + this.offsetHeight;
        oDivList.style.posLeft = oDivList.offsetLeft - this.offsetWidth - 8;
    }
};
</script>
</body>
</html>

【運(yùn)行效果】

【難點(diǎn)剖析】

本例的重點(diǎn)是如何獲取用戶的選擇內(nèi)容。彈出下拉框并不復(fù)雜，當(dāng)文本框獲取焦點(diǎn)時，設(shè)置div(此處代表下拉框)的“style”屬性為“none”即可。要獲取用戶選擇的內(nèi)容，則首先需要為窗體中所有的列表元索“Ii”設(shè)置一些事件，可參考代碼中的詳細(xì)注釋。

【源碼下載】

本實(shí)例JS代碼下載