當前位置:蘿卜系統下載站 > 技術開發教程 > 詳細頁面

通過JS代碼完成文本框取得焦點彈出下拉框

通過JS代碼完成文本框取得焦點彈出下拉框

更新時間:2023-06-22 文章作者:未知 信息來源:網絡 閱讀次數:

編程(Programming)是編定程序的中文簡稱,就是讓計算機代碼解決某個問題,對某個計算體系規定一定的運算方式,使計算體系按照該計算方式運行,并最終得到相應結果的過程。為了使計算機能夠理解(understand)人的意圖,人類就必須將需解決的問題的思路、方法和手段通過計算機能夠理解的形式告訴計算機,使得計算機能夠根據人的指令一步一步去工作,完成某種特定的任務。這種人和計算體系之間交流的過程就是編程。

【實例名稱】

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

【實例描述】

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

【實例代碼】

<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代碼下載


使用編程語言寫的程序,由于每條指令都對應計算機一個特定的基本動作,所以程序占用內存少、執行效率高。

溫馨提示:喜歡本站的話,請收藏一下本站!

本類教程下載

系統下載排行

網站地圖xml | 網站地圖html
亚洲嫩草影院久久精品