表单事件 - JavaScript | 绿叶学习网

在JavaScript中，常用的表单事件有3种。

（1）onfocus和onblur
（2）onselect
（3）onchange

实际上，除了上面这几个，还有一个onsubmit事件。不过onsubmit事件一般都是结合后端技术来使用，所以暂时可以不管。

一、onfocus和onblur

onfocus表示获取焦点时触发的事件，而onblur表示失去焦点时触发的事件，两者是相反操作。

onfocus和onblur这两个事件往往都是配合一起使用的。例如用户准备在文本框中输入内容时，此时它会获得光标，就会触发onfocus事件。当文本框失去光标时，就会触发onblur事件。

并不是所有的HTML元素都有焦点事件，具有“获取焦点”和“失去焦点”特点的元素只有2种。

（1）表单元素（单选框、复选框、单行文本框、多行文本框、下拉列表）
（2）超链接

判断一个元素是否具有焦点很简单，我们打开一个页面后按Tab键，能够选中的就是具有焦点特性的元素。在实际开发中，焦点事件（onfocus和onblur）一般用于单行文本框和多行文本框这两个，其他地方比较少用。

举例：搜索框


在线测试
<!DOCTYPE html> 
<html>
<head>
    <meta charset="utf-8" />
    <title></title>
    <style type="text/css">
        #search{color:#bbbbbb;}
    </style>
    <script>
        window.onload = function () 
        {
            //获取元素对象
            var oSearch = document.getElementById("search");
            //获取焦点
            oSearch.onfocus = function () 
            {
                if (this.value == "百度一下，你就知道") 
                {
                    this.value = "";
                }
            };
            //失去焦点
            oSearch.onblur = function () 
            {
                if (this.value == "") 
                {
                    this.value = "百度一下，你就知道"; 
                }
            };
        }
    </script>
</head>
<body>
    <input id="search" type="text" value="百度一下，你就知道"/>
    <input type="button" value="搜索" />
</body>
</html>

浏览器预览效果如下图所示。

分析：

在这个例子中，当文本框获得焦点（也就是有光标）时，提示文字就会消失。当文本框失去焦点时，如果没有输入任何内容，提示文字会重新出现。从这里小伙伴们可以感性认识到“获取焦点”和“失去焦点”是怎么一回事。

上面搜索框的外观还有待改善，不过技巧已经交给大家了。我们可以动手尝试去实现一个更加美观的搜索框，会从中学到很多东西。

像上面这种搜索框的提示文字效果，其实我们也可以使用HTML5表单元素新增的placeholder属性来实现，代码如下：

<input id="search" type="text" placeholder="百度一下，你就知道" />

对于焦点事件来说，还有一点要补充的。默认情况下，文本框是不会自动获取焦点的，而必须点击文本框才会获取。但是我们却经常看到很多页面一打开的时候，文本框就已经自动获取到了焦点，例如百度首页（大家可以去看看）。那么这个效果是怎么实现的呢？很简单，一个focus()方法就可以轻松搞定。

举例：focus()方法


在线测试
<!DOCTYPE html> 
<html>
<head>
    <meta charset="utf-8" />
    <title></title>
    <script>
        window.onload = function () 
        {
            var oTxt = document.getElementById("txt");
            oTxt.focus();
        }
    </script>
</head>
<body>
    <input id="txt" type="text"/>
</body>
</html>

浏览器预览效果如下图所示：

分析：

focus()跟onfocus是不一样的。focus()是一个方法，仅仅用于让元素获取焦点。而onfocus是一个属性，它是用于事件操作的。

二、onselect

在JavaScript中，当我们选中“单行文本框”或“多行文本框”中的内容时，就会触发onselect事件。

举例：


在线测试
<!DOCTYPE html> 
<html>
<head>
    <meta charset="utf-8" />
    <title></title>
    <script>
        window.onload = function () 
        {
            var oTxt1 = document.getElementById("txt1");
            var oTxt2 = document.getElementById("txt2");
            oTxt1.onselect = function () 
            {
                alert("你选中了单行文本框中的内容");
            };
            oTxt2.onselect = function () 
            {
                alert("你选中了多行文本框中的内容");
            };
        }
    </script>
</head>
<body>
    <input id="txt1" type="text" value="如果我真的存在，也是因为你需要我。"/><br />
    <textarea id="txt2" cols="20" rows="5">如果我真的存在，也是因为你需要我。</textarea>
</body>
</html>

浏览器预览效果如下图所示。

分析：

当我们选中单行文本框或多行文本框中的内容时，都会弹出对应的对话框。onselect事件在实际开发中用得极少，我们了解一下就行，不需要深入。

再回到实际开发中，我们在使用搜索框的时候，每次点击搜索框，它就自动帮我们把文本框内的文本全选中了（大家先去看看百度搜索是不是这样的），这个又是怎么实现的呢？这就用到了select()方法。

举例：select()方法


在线测试
<!DOCTYPE html> 
<html>
<head>
    <meta charset="utf-8" />
    <title></title>
    <script>
        window.onload = function ()
        {
            var oSearch = document.getElementById("search");
            oSearch.onclick = function () 
            {
                this.select();
            };
        }
    </script>
</head>
<body>
    <input id="search" type="text" value="百度一下，你就知道" />
</body>
</html>

浏览器预览效果如下图所示。

当我们点击文本框时，预览效果如下图所示。

分析：

select()跟onselect是不一样的。select()是一个方法，仅仅用于全选文本。而onselect是一个属性，它是用于事件操作的。select()和onselect的关系，跟focus()和onfocus的关系是相似的。

三、onchange

在JavaScript中，onchange事件常用于“具有多个选项的表单元素”。

（1）单选框选择某一项时触发。
（2）复选框选择某一项时触发。
（3）下拉列表选择某一项时触发。

举例：单选框


在线测试
<!DOCTYPE html> 
<html>
<head>
    <meta charset="utf-8" />
    <title></title>
    <script>
        window.onload = function () 
        {
            var oFruit = document.getElementsByName("fruit");
            var oP = document.getElementById("content");
            for (var i = 0; i < oFruit.length; i++) 
            {
                oFruit[i].onchange = function () 
                {
                    if (this.checked) 
                    {
                        oP.innerHTML = "你选择的是：" + this.value;
                    }
                };
            }
        }
    </script>
</head>
<body>
    <div>
        <label><input type="radio" name="fruit" value="苹果" />苹果</label>
        <label><input type="radio" name="fruit" value="香蕉" />香蕉</label>
        <label><input type="radio" name="fruit" value="西瓜" />西瓜</label>
    </div>
    <p id="content"></p>
</body>
</html>

浏览器预览效果如下图所示。

当我们选中任意一项时，就会立即显示出结果来，效果如下图所示。

分析：

这里我们使用getElementsByName ()方法获得具有同一个name属性值的表单元素，然后使用for循环遍历，目的是为了给每一个单选按钮都添加onchange事件。当我们选中任意一个单选按钮（也就是触发onchange事件）时，判断当前单选按钮是否选中（this.checked）。如果选中，就将选中的单选按钮的值（this.value）赋值给oP.innerHTML。

举例：复选框的全选与反选


在线测试
<!DOCTYPE html> 
<html>
<head>
    <meta charset="utf-8" />
    <title></title>
    <script>
        window.onload = function () 
        {
            var oSelectAll = document.getElementById("selectAll");
            var oFruit = document.getElementsByName("fruit");
            oSelectAll.onchange = function () 
            {
                //如果选中，即this.checked返回true
                if (this.checked) {
                    for (var i = 0; i < oFruit.length; i++) 
                    {
                        oFruit[i].checked = true;
                    }
                } else {
                    for (var i = 0; i < oFruit.length; i++) 
                    {
                        oFruit[i].checked = false;
                    }
                }
            };
        }
    </script>
</head>
<body>
    <div>
        <p><label><input id="selectAll" type="checkbox"/>全选/反选：</label></p>
        <label><input type="checkbox" name="fruit" value="苹果" />苹果</label>
        <label><input type="checkbox" name="fruit" value="香蕉" />香蕉</label>
        <label><input type="checkbox" name="fruit" value="西瓜" />西瓜</label>
    </div>
</body>
</html>

浏览器预览效果如下图所示。

分析：

当【全选】复选框被选中时，下面所有复选框就会被全部选中。然后再次点击【全选】按钮，此时下面所有复选框就会被取消选中。

哪个元素在搞事（触发事件），this就是哪个。我们一定要非常清楚这一点，因为后面会经常碰到。

举例：下拉列表


在线测试
<!DOCTYPE html> 
<html>
<head>
    <meta charset="utf-8" />
    <title></title>
    <script>
        window.onload = function () 
        {
            var oList = document.getElementById("list");
            oList.onchange = function () 
            {
                var link = this.options[this.selectedIndex].value;
                window.open(link);
            };
        }
    </script>
</head>
<body>
    <select id="list">
        <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事件，然后就会在新的窗口打开对应的页面。下拉菜单这种效果还是比较常见的，我们可以了解一下。

对于select元素来说，我们可以使用obj.options[n]的方式来得到某一个列表项，这个列表项也是一个DOM对象。并且还可以使用obj.selectedIndex来获取你所选择的这个列表项的下标。这两个都是下拉列表所独有的也是经常用的方法。

此外，window.open()表示打开一个新的窗口，对于这个我们在“13.2 窗口操作”这一节会详细介绍。

有一点要提醒大家的：选择下拉列表的某一项时，触发的是onchange事件，而不是onselect事件。onselect事件仅仅在选择文本框中的内容时才会触发，我们要清楚这两者的区别。