文本框獲取焦點彈出下拉框

【實例名稱】

文本框獲取焦點彈出下拉框

【實例描述】

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

【實例代碼】

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

【運行效果】

【難點剖析】

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

【源碼下載】

本實例JS代碼下載