在JavaScript中,常用的表單事件有4種:
下面我們一一給大家介紹。
哎呀呀,又一對好基友閃亮登場。onfocus和onblur這2個事件往往都是配合使用。例如。在用戶在文本框輸入信息時,將光標放在文本框中,文本框會獲取焦點。當文本框失去光標時,文本框失去焦點。
onfocus表示獲取焦點觸發的事件,onblur表示失去焦點觸發的事件。
具有獲得焦點和失去焦點事件的元素有3個:
好吧,還是來個例子先。
舉例:搜索框的制作
在線測試<!DOCTYPE html> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <title></title> <style type="text/css"> #search { color:#bbbbbb; } </style> </head> <body> <input id="search" type="text" value="百度一下,你就知道"/><input id="Button1" type="button" value="搜索" /> <script type="text/javascript"> //獲取元素對象 var e = document.getElementById("search"); //獲取字符串“百度一下,你就知道” var txt = e.value; //獲取焦點事件 e.onfocus = function () { if(e.value==txt)e.value = ""; } //失去焦點事件 e.onblur = function () { if (e.value == "") e.value = txt; } </script> </body> </html>
在浏覽器預覽效果如下:
分析:
在這個例子中,當文本框獲取焦點時,文本框提示文字就會消失;當文本框失去焦點後,會判斷是否已經輸入字符串,如果沒有的話,文本框提示文字會重新出現。大家都能感性德理解“獲取焦點事件”和“失去焦點”事件是怎麼一回事了。
上面的外觀還有待改善,不過技巧已經交給大家了。大家可以試著做出一些比較好看的搜索文本框,你會從中學到很多東西,包括outline屬性等。有機會,站長再出一個綜合性的教程,教大家做出類似淘寶那種高級表單效果。
其實上面那種文本框特效,只需要用HTML5表單中的一個placeholder屬性即可,完整語法如下:
<input id="search" type="text" placeholder="百度一下,你就知道" />
在未來上線的HTML5教程中你會學到更多關於HTML5的技巧,敬請關注!
在JavaScript中,當用戶在單行文本框text和多行文本框textarea輸入文本時,由於文本框內字符串的改變將會觸發onchange事件。此外,在下拉列表select中一個選項的狀態改變後也會觸發onchange事件。
具有獲得onchange事件的元素有3個:
舉例:
在線測試<!DOCTYPE html> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <title></title> </head> <body> <textarea id="txt" rows="5" cols="20"></textarea><br /> 輸入字符長度為:<span id="num"></span> <script type="text/javascript"> var e = document.getElementById("txt"); var n = document.getElementById("num"); e.onchange = function () { var len = e.value.length; n.innerText = len; } </script> </body> </html>
在浏覽器預覽效果如下:
分析:
當我們在文本框輸入字符,然後讓文本框失去焦點,即可看到統計字符串的長度值。
舉例:
在線測試<!DOCTYPE html> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <title></title> <script type="text/javascript"> function jump(){ var e = window.event; var obj = e.srcElement; var link = obj.options[obj.selectedIndex].value; window.open(link, "", ""); } </script> </head> <body> <select id="list" onchange="jump()"> <option value="http://wwww.baidu.com">百度</option> <option value="http://www.sina.com.cn">新浪</option> <option value="http://www.qq.com">騰訊</option> <option value="http://www.sohu.com">搜狐</option> </select> </body> </html>
在浏覽器預覽效果如下:
分析:
當我們選取下拉列表某一項時,就會執行onchange事件,然後就會在新窗口打開相應的頁面。
在JavaScript中,當用戶選中單行文本框text或多行文本框textarea的文本時,會觸發onselect事件。onselect事件的具體過程是從鼠標按鍵被按下,到鼠標開始移動並選中內容的過程。這個過程並不包括鼠標鍵的放開。
新手很容易把onselect和onchange這2個事件搞混,誤以為下拉列表列表項的選中觸發的事件是onselect。這一點大家要搞清楚:下拉列表列表項的選中觸發的事件是onchange而不是onselect。
舉例:
在線測試<!DOCTYPE html> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <title></title> <link href="StyleSheet.css" rel="stylesheet" type="text/css" /> </head> <body> <input id="txt1" type="text" value="歡迎來到 學習網學習JavaScript入門教程"/><br /> <textarea id="txt2" cols="20" rows="5">歡迎來到 學習網學習JavaScript入門教程</textarea> <script type="text/javascript"> document.getElementById("txt1").onselect = function () { alert("你選中了單行文本框中的內容"); } document.getElementById("txt2").onselect = function () { alert("你選中了多行文本框中的內容"); } </script> </body> </html>
在浏覽器預覽效果如下:
分析:
當我們選中單行文本框text或多行文本框的內容時都會彈出相應的對話框。
總結1、這一節所學到的事件都是針對表單而言,大家要清楚這一點;
2、在JavaScript中,常用的表單事件如下: