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

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

（1）focus和blur
（2）select
（3）change

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

一、focus和blur

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

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

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

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

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

举例：搜索框


在线测试
<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8" />
    <title></title>
    <style type="text/css">
        #search{color:#BBBBBB;}
    </style>
    <script src="js/jquery-1.12.4.min.js"></script>
    <script>
        $(function () {
            //获取文本框默认值
            var txt = $("#search").val();
            //获取焦点
            $("#search").focus(function(){
                if($(this).val() == txt){
                    $(this).val("");
                }
            })
            //失去焦点
            $("#search").blur(function () {
                if ($(this).val() == "") {
                    $(this).val(txt);
                }
            })
        })
    </script>
</head>
<body>
    <input id="search" type="text" value="百度一下，你就知道" />
    <input type="button" value="搜索" />
</body>
</html>

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

分析：

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

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

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

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

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

举例：自动获取焦点


在线测试
<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8" />
    <title></title>
    <script src="js/jquery-1.12.4.min.js"></script>
    <script>
        $(function () {
            $("#txt").focus();
        })
    </script>
</head>
<body>
    <input id="txt" type="text" />
</body>
</html>

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

分析：

focus()不仅作为一个事件，还可以作为一个方法。

二、select

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

举例：


在线测试
<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8" />
    <title></title>
    <script src="js/jquery-1.12.4.min.js"></script>
    <script>
        $(function () {
            $("#txt1").select(function(){
                alert("你选中了单行文本框中的内容")
            })
            $("#txt2").select(function () {
                alert("你选中了多行文本框中的内容")
            })
        })
    </script>
</head>
<body>
    <input id="txt1" type="text" value="绿叶学习网，给你初恋般的感觉"/><br />
    <textarea id="txt2" cols="20" rows="5">绿叶学习网，给你初恋般的感觉</textarea>
</body>
</html>

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

分析：

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

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

举例：全选文本


在线测试
<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8" />
    <title></title>
    <script src="js/jquery-1.12.4.min.js"></script>
    <script>
        $(function () {
            $("#search").click(function(){
                $(this).select();
            })
        })
    </script>
</head>
<body>
    <input id="search" type="text" value="百度一下，你就知道" />
</body>
</html>

默认情况下，预览效果如下图所示。

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

分析：

跟focus()方法一样，select()不仅作为一个事件，还可以作为一个方法。

三、change

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

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

举例：单选框


在线测试
<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8" />
    <title></title>
    <script src="js/jquery-1.12.4.min.js"></script>
    <script>
        $(function () {
            $('input[type="radio"]').change(function(){
                var bool = $(this).prop("checked");
                if(bool){
                    $("p").text("你选择的是：" + $(this).val());
                }
            })
        })
    </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></p>
</body>
</html>

默认情况下，预览效果如下图所示。

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

分析：

表示选取所有单选框，这是一种属性选择器，之前我们已经接触过了。

$(this).prop("checked")表示获取单选框checked属性的取值。

从之前“5.1 属性操作”这一节中我们知道：对于表单元素的checked、selected、disabled这些属性，我们使用attr()方法是没法获取的，而必须使用prop()方法来获取。

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


在线测试
<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8" />
    <title></title>
    <script src="js/jquery-1.12.4.min.js"></script>
    <script>
        $(function () {
            $("#selectAll").change(function(){
                var bool = $(this).prop("checked");
                if(bool){
                    $(".fruit").prop("checked","checked");
                }else{
                    $(".fruit").removeProp("checked");
                }
            })
        })
    </script>
</head>
<body>
    <div>
        <p><label><input id="selectAll" type="checkbox"/>全选/反选：</label></p>
        <label><input type="checkbox" class="fruit" value="苹果" />苹果</label>
        <label><input type="checkbox" class="fruit" value="香蕉" />香蕉</label>
        <label><input type="checkbox" class="fruit" value="西瓜" />西瓜</label>
    </div>
</body>
</html>

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

分析：

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

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

举例：下拉列表


在线测试
<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8" />
    <title></title>
    <script src="js/jquery-1.12.4.min.js"></script>
    <script>
        $(function () {
            $("select").change(function(){
                var link = $(":selected").val();
                window.open(link);
            })
        })
    </script>
</head>
<body>
    <select>
        <option value="http://wwww.baidu.com">百度</option>
        <option value="http://www.qq.com">腾讯</option>
        <option value="http://www.sina.com.cn">新浪</option>
        <option value="http://www.sohu.com">搜狐</option>
        <option value="http://www.163.com">网易</option>
    </select>
</body>
</html>

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

分析：

当我们选择下拉列表的某一项时，就会触发change事件，然后就会在新的窗口打开对应的页面。下拉菜单这种效果还是比较常见的，我们可以了解一下。

(":selected").val()表示选取被选中的下拉菜单的选项（即被选中的option元素），然后获取该选项的value值。其中，(":selected")是一个表单属性伪类选择器，我们在之前“3.7 表单属性伪类选择器”这一节已经详细介绍过了。