DIV CSS 佈局教程網

 DIV+CSS佈局教程網 >> 網頁腳本 >> JavaScript入門知識 >> JavaScript基礎知識 >> 14.5 JavaScript表單事件
14.5 JavaScript表單事件
編輯:JavaScript基礎知識     

在JavaScript中,常用的表單事件有4種:

  • (1)onfocus事件;
  • (2)onblur事件;
  • (3)onchange事件;
  • (4)onselect事件;

下面我們一一給大家介紹。

一、onfocus和onblur事件

哎呀呀,又一對好基友閃亮登場。onfocus和onblur這2個事件往往都是配合使用。例如。在用戶在文本框輸入信息時,將光標放在文本框中,文本框會獲取焦點。當文本框失去光標時,文本框失去焦點。

onfocus表示獲取焦點觸發的事件,onblur表示失去焦點觸發的事件。

具有獲得焦點和失去焦點事件的元素有3個:

  • (1)單行文本框text;
  • (2)多行文本框textarea;
  • (3)下拉列表select;

好吧,還是來個例子先。

舉例:搜索框的制作

在線測試
 
<!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的技巧,敬請關注!

二、onchange事件

在JavaScript中,當用戶在單行文本框text和多行文本框textarea輸入文本時,由於文本框內字符串的改變將會觸發onchange事件。此外,在下拉列表select中一個選項的狀態改變後也會觸發onchange事件。

具有獲得onchange事件的元素有3個:

  • (1)單行文本框text;
  • (2)多行文本框textarea;
  • (3)下拉列表select;

舉例:

在線測試
 
<!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事件,然後就會在新窗口打開相應的頁面。

三、onselect事件

在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中,常用的表單事件如下:

  • (1)onfocus和onblur;
  • (2)onchange;
  • (3)onselect;
XML學習教程| jQuery入門知識| AJAX入門| Dreamweaver教程| Fireworks入門知識| SEO技巧| SEO優化集錦|
Copyright © DIV+CSS佈局教程網 All Rights Reserved